I have 2 select boxes. On change of one select box, I want the other select box to be defaulted to Select a value, ie val()==0, and vice versa. Only one select box should have a value selected at a time. How do I do this? I tried the code below but it does not work.
$("#select_one").change(function() {
if ('#select_two'.val() != 0) {
$('#select_two').val(0);
}
});
The simplest way to do this would be to place a common class on both the select. You can then select that class in jQuery and use not() to exclude the current element before resetting the value, something like this:
$('.select').change(function() {
$('.select').not(this).val(0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-one" class="select">
<option value="0">Please select</option>
<option>Foo</option>
<option>Bar</option>
<option>Fizz</option>
<option>Buzz</option>
</select>
<select id="select-two" class="select">
<option value="0">Please select</option>
<option>Foo</option>
<option>Bar</option>
<option>Fizz</option>
<option>Buzz</option>
</select>
You may set the selectedIndex to 0:
$('select[id^="select_"]').on('change', function(e) {
$('select[id^="select_"]').not(this).prop('selectedIndex', 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_one">
<option value="volvo">1</option>
<option value="saab">2</option>
<option value="mercedes">3</option>
<option value="audi">4</option>
</select>
<select id="select_two">
<option value="volvo">11</option>
<option value="saab">22</option>
<option value="mercedes">33</option>
<option value="audi">44</option>
</select>
That could be done using two simple change events, like the following example.
Else if you want to use one event you could use a common class as #Rory McCrossan answer shows..
Hope this helps.
$("#select_one").change(function() {
$('#select_two').val(0)
});
$("#select_two").change(function() {
$('#select_one').val(0)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_one">
<option value="0">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<select id="select_two">
<option value="0">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
Related
I'm trying to do that this code:
$(document).ready(function () {
$('select').change(function () {
alert(this.value);
});
Alerts a message but only when one of the various dropdowns onscreen is selected. But it works whenever I pick ANY dropdown. How can I do it so that it only works with one specific dropdown?
Simply give your respective select tag an id, then use that id for your selector in your jQuery:
$('#select1').change(function ()
{
alert(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
<option value="">--Please Choose--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="select2">
<option value="">--Please Choose--</option>
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cherry</option>
</select>
I need your help. So what I want to do is when a user select an option from one select, automatically hide an option from another multiple select.
Example:
if a user choose Car from select A, I want the car option from the select B to be automatically removed or hidden.
select A:
<select name="my_option_one" required id="id_my_option_one">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
Select B:
<select name="my_option_two" id="id_my_option_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
This is what I have tried but none of it worked.
$(document).ready(function() {
$("#id_my_option_one").change(function() {
if ($(this).val() === 'C') {
$("#id_my_option_two option[value='C']").options[0].remove();
$('select[name=my_option_two] option:eq(1)').hide();
$("#id_my_option_two option[value=" + 'C' + "]").hide();
$("#id_my_option_two option[value='C']").attr('disabled','disabled').hide();
}
});
});
function my_optionsChange() {
$("#id_my_options_two option").show(); //.css("display", "block");
$("#id_my_options_two option[value='" + $("#id_my_options").val() + "']").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="my_options" required id="id_my_options" onchange="my_optionsChange()">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
I made an example which is longer because it's split into parts so you understand better what is going on.
I tried to name the variables so that it's clear what they are, but if you have any questions, please ask in the comments.
Let me know if this works for you.
const firstSelect = $('#id_my_options')
const secondSelect = $('#id_my_options_two')
firstSelect.on('change',function() {
const selected = $(this).find('option:selected');
const selectedValue = selected.val()
const secondOptions = secondSelect.children();
secondOptions.each(function() {
const secondValue = $(this).val()
secondValue === selectedValue ? $(this).hide() : $(this).show()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my_options" required id="id_my_options">
<option value="Choose" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options" id="firstblock" onchange="disable(2,this.value);">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options" id="secondblock" onchange="disable(1,this.value);">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<script>
function disable(needtoblock,val){
console.log(needtoblock+" "+val);
if(val != ""){
if(needtoblock == 1){
$("#firstblock option[value='"+val+"']").prop('disabled', true);
}else if(needtoblock == 2){
$("#secondblock option[value='"+val+"']").prop('disabled', true);
}else{
}
}else{
$("#secondblock option").prop('disabled', false);
$("#firstblock option").prop('disabled', false);
}
}
</script>
This is how code could look, definetly you need to update and make it suitable for you.
I know, this is a bit late, but maybe it is of interest to someone out there. I understood the demand of OP so, that the hiding of options was to be done in any direction, or potentially spanning over multiple selector boxes. The following script will do exactly that: if you select an option in one selector it will go through the other selectors of the defined group $grp (by doing $grp.not(this).each((i,trg)=> ...)) and will hide/show all options there, depending of whether thay have been selected elsewhere already.
The $(to).toggle(...) method sets the visibility of each option (to) within trg, based on the existence of selected options with the same value in the sibling selectors of trg (again, limited to the current group $grp).
Maybe the script is a little too condensed for easy reading but it shows how much you can achieve with very little code when you use the power of jQuery.
const $grp=$('select[id^=id_my_options]') // define the selector group
$grp.on('change',function(ev){ // bind the change event ...
$grp.not(this).each((i,trg)=> // work on each sibling-selector (trg) of clicked
// selector (this), but only within jquery
// selection $grp
$('option[value!=""]',trg).each((j,to)=> // for all options of sibling-selectors of
// trg (within jquery selection $grp):
$(to).toggle($grp.not(trg).find('option[value='+to.value+']:selected').length==0))
// toggle the visibiltiy of that option
)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my_options" required id="id_my_options">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car2</option>
<option value="H">House2</option>
<option value="A">Airplane2</option>
</select>
<select name="my_options_three" id="id_my_options_three" multiple="multiple">
<option value="O">yet another option</option>
<option value="C">Car3</option>
<option value="H">House3</option>
<option value="A">Airplane3</option>
</select>
<br><br>
<select name="my_options_four" id="id_your_options_four" multiple="multiple">
<option value="O">and some unrelated options</option>
<option value="C">Car3</option>
<option value="H">House3</option>
<option value="A">Airplane3</option>
</select>
I have two select element and I need to remove last option from both select using jQuery.
First Select Element
<select class="selBooks" name="select1" >
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
Second Select Element
<select class="selBooks" name="select2" >
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>
jQuery
$(".selBooks option:last").remove();
When I try this it only removes last option of second select element. Please guide me if I am doing anything wrong or there is other way to achieve this.
iterate .selBooks with loop and remove the last element of that class.
$('.selBooks').each(function() {
$(this).find("option:last").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selBooks" name="select1" >
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
Second Select Element
<select class="selBooks" name="select2" >
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>
jQuery
Try by name
$(".selBooks[name=select1] option:last").remove();
$(".selBooks[name=select2] option:last").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selBooks" name="select1" >
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
Second Select Element
<select class="selBooks" name="select2" >
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>
Use last-child.
$('.selBooks option:last-child').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selBooks" name="select1">
<option value="8247(random)">Opt2</option>
<option value="1939(random)">Opt1</option>
</select>
<select class="selBooks" name="select2">
<option value="8244(random)">Opt3</option>
<option value="1938(random)">Opt4</option>
</select>
I have 2 drop down list
<select id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
I want that the second drop down list should get enabled only if we choose a value in the first drop down list. It should again get disabled if we deselect the value from the first drop down list.
May I know how can this be achieved using jQuery?
You can use the disabled attribute and using JavaScript, you can set it as false or true
function check(){
if(document.getElementById('servergroup').value!='')
document.getElementById('servername').disabled=false;
else
document.getElementById('servername').disabled=true;
}
<select onchange="check()" id="servergroup" multiple="multiple">
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select disabled id="servername" multiple="multiple">
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
$('#bonusVoucher').prop('disabled',false);
jQuery('#bonusVoucher').selectpicker('refresh');
Use selectpicker like this and the most IMPORTANT part is this:
Note: Place your bootsrap selectpicker script after jquery script.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
jQuery solution.
function change() {
if ($('#servergroup option:selected').length) {
$('#servername').attr('disabled', false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="servergroup" multiple="multiple" onchange='change()'>
<option value="P1">P1</option>
<option value="P2">P2</option>
<option value="P3">P3</option>
<option value="P4">P4</option>
</select>
<select id="servername" multiple="multiple" disabled>
<option value="s597ap233">s597ap233</option>
<option value="s597dp392">s597dp392</option>
<option value="s397dp095">s397dp095</option>
</select>
First add
<option value="-1"> -Select Server Group- </option>
and
<option value="-1"> -Select Server Name- </option>
to Your Dropdown boxes respectively.
We can achieve requested actions using JQuery as Follows:
$(document).ready(function ()
{
//making serverName Dropdown box disabled by default.
$('#servername').prop('disabled', true);
$('#servergroup').change(function ()
{
if($(this).val == "-1")
{
$('#servername').val = "-1";
$('#servername').prop('disabled', true);
}
else
{
$('#servername').prop('disabled', false);
}
});
});
I have the following select drop down box:
<select name="selectcourier" required>
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
What I want to do is if Interlink is selected a secondary select box appears below it and disappears if it unselected and another option is chosen instead. This is the second select drop down box.
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
How can I go about getting this working?
bind an event with javascript on change and insert a new element in the DOM (the second select statement) like:
(provided you have jquery)
var secondSelect="your_html_here";
$("name='selectcourier'").change(function() {
if (this.val()=='Interlink') {
$('body').append(secondSelect); }
else {
$('#secondselectid').remove();
});
customise the html and where you want to append the second select
<script>
$(function(){
$('#s1').hide();
});
function call()
{
var check=$('#s2').val();
if(check=="Interlink")
{
$('#s1').show();
}
else
{
$('#s1').hide();
}
}
</script>
<select name="selectcourier" required onchange="call();" id="s2" >
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<label>Select Shipping Courier:</label>
<select name="selectcourier" required id="s1">
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
You can use the above code to achieve your task
Just react on the event of changing the value of the first select.
If the value equals 'Interlink' display the second select - if the value is something else hide the second select.
<select name="selectcourier" required onchange="document.getElementById('interlink_addition').style.display = (this.value=='Interlink' ? 'block' : 'none')">
<option value="">Please Select</option>
<option value="collection">Collection</option>
<option value="Interlink">Interlink</option>
<option value="DespatchBay">Despatch Bay</option>
<option value="International">International</option>
</select>
<div id="interlink_addition" style="display:none">
<label>Select Shipping Courier:</label>
<select name="selectcourier" required>
<option value="1">Please Select</option>
<option value="2">Next Day</option>
<option value="3">2-3 Day</option>
<option value="3">Pre 12</option>
</select>
</div>
you can use ajax for this. write a ajax function to show second select box and call it on onChange event of the first select Box