Why select() method is not working in Combobox? - javascript

I need to do in Combobox exact things that I do with in textbox. When the page loads Combobox first value with like Focus().select()
$(document).ready(function(){
$('#sel_bookID').focus().select();
});
<input type=text id="sel_bookID" value="ddddddddd" name='userid1'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
Like this when page load

You can set an option as the default using the selected attribute:
<select>
<option>Opt 1</option>
<option selected="true">Opt 2</option>
<option>Opt 3</option>
</select>
However, if you really want to use jQuery to do this you can use .prop method:
$(document).ready(function() {
$('#opt2').prop('selected', true);
});
<select>
<option>Opt 1</option>
<option id="opt2">Opt 2</option>
<option>Opt 3</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

$(document).ready(function(){
$('#sel_bookID').focus().select();
});
<select id="sel_bookID" name='userid1'>
<option value="ddddddddd">ddddddddd</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

Maybe your trying to do like this?
<select id="sel_bookID">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$(document).ready(function(){
alert($("#sel_bookID option:selected").text());
});
or maybe you only need autofocus please check this link on select autofocus

Related

Select2 hide options with jquery

I need to show/hide options on one select drop down dependant on another select drop down option.
My code:
$(document).ready(function() {
$("#layout_select").select2();
$("#column_select").select2();
$("#layout_select").children('option:gt(0)').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').hide();
$("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<option value="col1">none</option>
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
When I change the selection of my first 'column_select', I want to change my 'layout_select' options using hide / show
Something like this StackOverflow issue
Note: I am using Select2.
In my implementation I did exactly as the example, but as I am using select2 scrpit does not work.
Does anyone know how to do the same thing, knowing that I'm using select2? Without using .remove () and .append (), but exactly as in the example giving hide / show.
As suggested in this answer, you could disable the options instead of hiding them and use CSS to hide the options if you want (they will be grayed out otherwise).
You will have to call $("#layout_select").select2(); at the end of the change event and call $("#column_select").change(); to trigger the change event on page load.
$(document).ready(function() {
$("#layout_select").select2();
$("#column_select").select2();
$("#layout_select").children('option:gt(0)').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').prop('disabled', true);
$("#layout_select").children("option[value^=" + $(this).val() + "]").prop('disabled', false);
$("#layout_select").select2();
})
$("#column_select").change();
});
.select2-container--default .select2-results__option[aria-disabled=true] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<option value="col1">none</option>
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>

Javascript add new select index with data from database

I want to create a selection that triggers another selection to select data from the database when the first selection is selected.
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
How to take the data from the database if option 1, 2, or 3 is selected, and the second selection option has a value in it? And if the user changes the option, the second selection index is reset.
Here's the code with Javascript Vanilla:
<body>
<select id="brandSelect" onchange="optionSelected(this.value)">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
</body>
<script>
function optionSelected(value) {
alert(value)
// DO Database Fetch Code Here
}
</script>
And I will tell you there is a good website, we might not need jQuery.
In the bellow Code, by changing the #brandselect you can triger change on the other select. I put specific value. You can add the value you want there.
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#graphs').val("20");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="graphs">
<option value="10">AMD</option>
<option value="20">NVidia</option>
</select>
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
// Here you change the selection of the other Select
alert();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
first you need to handle change event and from based on that you can handle second dropdown change event.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<script>
$(document).on('change', '#brandSelect', function() {
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
//here you can use ajax call to fetch data from database.
alert();
})
</script>

Select item from selection box

I want to select my country from the selection box;
http://tr.investing.com/currencies/single-currency-crosses
there is a change_result(); in it's on change.
I get the selection box as;
$("#symbols")
But how will I trigger the on change box and reload the page according to the new selected option.
Something like this maybe?
$("#myselect").change(function() {
var selectedOption = $("#myselect option:selected").text();
var selectedValue = $(this).val();
// Do something here
$("#"+selectedValue).fadeIn(1000);
});
<div id="2" style="display:none;">
Magic Text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
I think this will helps you
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="symbols">
<option value="0">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<script>
$(function(){
$('#symbols').on('change',function(){
var value=$(this).val();
alert(value);
});
});
</script>

Select dropdown option at the time of document load using Jquery

How to select dropdown option at the time of document load using Jquery?
Use
$(document).ready(function(){
$('#select-Id').val("rightVal");
});
Example:
For
<select id='days'>
<option value="sun">Sunday</option>
<option value="mon">Monday</option>
</select>
Use below code to select Monday
$(document).ready(function(){
$('#days').val("mon");
});
HTML:
<select id="sel">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Jquery:
​
$(document)​.ready(function(){
$('#sel').val('2');
})​;​
See Demo
You can use
$(document).ready(function(){
$('#sel').val('myValue'); // to set the current value
var selectedvalue=$('#selectId').val(); // get the selected value
alert(selectedvalue);
});
DEMO.

Links in <select> dropdown options

Is it possible for each dropdown options to link somewhere when selected without the need for an external button?
<select>
<option value="x">x</option>
<option value="y">y</option>
</select>
You can use the onChange property. Something like:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
Add an onchange event handler and set the pages location to the value
<select id="foo">
<option value="">Pick a site</option>
<option value="http://www.google.com">x</option>
<option value="http://www.yahoo.com">y</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
... or if you want / need to keep your option 'value' as it was, just add a new attribute:
<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>
<script>
document.getElementById('my_selection').onchange = function() {
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>
Maybe this will help:
<select onchange="location = this.value;">
<option value="home.html">Home</option>
<option value="contact.html">Contact</option>
<option value="about.html">About</option>
</select>
This is an old question, I know but for 2019 peeps:
Like above if you just want to change the URL you can do this:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
But if you want it to act like an a tag and so you can do "./page", "#bottom" or "?a=567" use window.location.replace()
<select onChange="window.location.redirect(this.value)">
<option value="..">back</option>
<option value="./list">list</option>
<option value="#bottom">bottom</option>
</select>
Extending on #kevin's answer,
if someone has to perform some confirmation logic if URL is critical.
<select onChange=" this.options[this.selectedIndex].text == 'Delete' ? "Confirmation logic" : window.location.href=this.value;" >
<option selected disabled>Action</option>
<option value="/user/view">View</option>
<option value="/user/edit">Edit</option>
<option value="/user/delete">Delete</option>
</select>
You can use this code:
<select id="menu" name="links" size="1" onchange="window.location.href=this.value;">
<option value="URL">Book</option>
<option value="URL">Pen</option>
<option value="URL">Read</option>
<option value="URL">Apple</option>
</select>

Categories