I have 2 <select> inputs. If I select an option in the first input, I want to filter the options by id based on the selected option of the first input.
I have defined id for each options in the second input ("prod"+id)
This is HTML:
<select id="provider" name="provider">
<option selected="selected" value="">--- Select providers ---</option>
<option value="1">Provider 1</option>
<option value="2">Provider 2</option>
<option value="3">Provider 3</option>
</select>
<select id="product" name="product">
<option id="" value="" selected="selected">--- Select products ---</option>
<option id="prod2" value="1">Product 1</option>
<option id="prod2" value="2">Product 2</option>
<option id="prod2" value="3">Product 3</option>
<option id="prod3" value="4">Product 4</option>
<option id="prod1" value="5">Product 5</option>
<option>
</select>
This is my jQuery code:
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#type').each(function(){
if ($(this).val() == filter) {
$(this).show();
} else {
$(this).hide();
}
$('#prod1').val(filter);
})
})
})
I want to show products from the selected provider only.
Online Demo: http://jsfiddle.net/notfoundlife/BCedV/1/
Assuming your html above, I think this should work for you.
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#product option[value=' + filter +']').attr('selected', 'selected');
});
});
I think your issue is that you are not selecting the individual options, but the whole select list, so everything is hiding. Try changing the selector like this and go from there.
$(document).ready(function(){
$('#provider').change(function(){
var filter = $(this).val();
$('#type option').each(function(){
if ($(this).val() == filter) {
$(this).show();
} else {
$(this).hide();
}
})
})
})
Related
Using the following code:
$("#select1").change(function() {
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
work fine and populate the specific options, but how to do it if I have:
one values for every option in select1:
<option value="1">some text</option>
and two values for every option in select2:
<option value="1,1">some other text</option>
UPDATE for more clarification:
The first select is like this:
<select id="select1">
<option value="1">text 1</option>
<option value="2">text 2</option>
<option value="3">text 3</option>
<option value="4">text 4</option>
<option value="5">text 5</option>
<option value="6">text 6</option>
<option value="7">text 7</option>
...
</select>
and the second one:
<select id="select2">
<option value="3">some text ...</option>
<option value="3">some text ...</option>
<option value="5">some text ...</option>
<option value="1">some text ...</option>
<option value="4">some text ...</option>
<option value="7">some text ...</option>
<option value="2">some text ...</option>
<option value="2">some text ...</option>
<option value="6">some text ...</option>
<option value="6">some text ...</option>
...
</select>
If I select the 2nd option from select1, the select2 will be like this
<select id="select2">
<option value="2">some text ...</option>
<option value="2">some text ...</option>
</select>
But, I'm looking for the same functionality when select2 option value is like (i.e):
<option value="2,24">some text ...</option>
If I understood what you need, you use value for filtering, and when you submit the form you need another data to send
I think the most appropriate way to achieve what you need to put the options of the second select in an array
then filter the array when first select option item selected
then build the second select options
var select2options = [
{ filterValue="1", text="some text", itemValue="2"},
{....},
...
]
then when you select an item from select1
`
$("#select1").change(function() {
var id = $(this).val();
var options = select2Options.filter( item => item.filterValue == id);
var select2HtmlOptions = '';
for(let i=0;i<options.length;i++){
select2HtmlOptions+= <option value="itemValue" data-
filter="filterValue">text</option>';
}
$('#select2').html(select2HtmlOptions);
});
`
and when you submit you can get
var filter = $( "#select2:selected" ).data('filter');
var text = $( "#select2:selected" ).text();
var optionValue = $( "#select2:selected" ).val()
try below
$("#select1").change(function() {
var id = $(this).val();
$("#select2 option").each(function() {
if ($(this).val() == id) {
$(this).show();
} else {
var arrVal = $(this).val().split(',');
if(arrVal.indexOf(id)>-1)
$(this).show();
else
$(this).hide();
}
});
});
https://jsfiddle.net/s41rjkhL/5/
I have two dropdowns and I want to make it whenever someone selects something in one dropdown the same thing is selected in the other dropdown. I can't get it to work when I select an option in the first dropdown then it doesn't select the same option in the other dropdown.
Here's the formula
$( function() {
$("input[name='FirstFlangeTypeDrop']").on("change", function(e) {
var newValue = e.target.value;
$("input[name='SecondFlangeTypeDrop'][value='" + newValue + "']").prop("selected", true);
});
});
Your question is a bit unclear to me. But I think this is what you are looking for.
$(function() {
$("select[name='FirstFlangeTypeDrop']").on("change", function(e) {
var newValue = $(this).val(); // get selected value
$("select[name='SecondFlangeTypeDrop']").val(newValue); // set selected value
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="FirstFlangeTypeDrop">
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<select name="SecondFlangeTypeDrop">
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
I'm using a Django form, and modifying an option list (in HTML) for one of the fields using $(document) on change for a different field in the form. When I select an option (multiple choice list, can select more than one - not checkboxes),
this.value
returns the correct value. However, when I deselect the option,
this.value
returns null. Why would this be the case? Is a value only returned when something is selected (as opposed to deselected)? If so, how can I get the value of the element that was deselected
Here is my code:
$(document).on("change", "#name2", function () {
var url = #the url I'm using
url += "&field=" + this.value + "&visible=1";
value = this.value
...etc
jQuery val() will return an array of values on a <select multiple> or null (depending on version):
$(document).on('change', '#name2', function() {
var val = $(this).val()
console.log(val ? val : 'None selected');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select size="20" id="name2" multiple="">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
<option value="4">Item 4</option>
<option value="5">Item 5</option>
<option value="6">Item 6</option>
<option value="7">Item 7</option>
<option value="8">Item 8</option>
<option value="9">Item 9</option>
<option value="10">Item 10</option>
</select>
You can iterate .selectedOptions property of <select> element with multiple attribute set to get the .value of each selected <option> element at change event
function getOptionValues(options) {
return Array.from(options, function(el) {
return el.value
})
}
document.querySelector("select")
.onchange = function() {
console.log(getOptionValues(this.selectedOptions))
}
<select multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Hi i would like to know how to use jQuery to change the third select box (#school) when ever the first select box on change event is triggered.
When select box 1 is selected, select box should change and select box three should also automatically change to reflect the options that correspond to what is in select box two.
$("#certificate").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#program option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[class=' + id + ']');
$('#program').html(options).show();
});
$("#program").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#school option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[class=' + id + ']');
$('#school').html(options).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="certificate">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="select2" id="program" >
<option value="">Select State</option>
<option class="india" value="orissa">Orissa</option>
<option class="india" value="telangan">Telangan</option>
<option class="america" value="america">USA</option>
<option class="america" value="america">California</option>
</select>
<select name="select3" id="school" >
<option value="">Select city</option>
<option class="orissa">Nal</option>
<option class="orissa">Mir</option>
<option class="telangan">Hyd</option>
<option class="telangan">Vija</option>
<option class="america">KRK</option>
<option class="america">MRK</option>
</select>
I have two select elements with some options. What I want to do is to handle this with jquery so as I can get the values of them only when options have values.
<div class="panel-heading">
<select id="loading-by-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
<select id="loading-by-sub-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
</div>
If I want to handle with one select element only I use .on('change', function() with select element and it works, but with multiple select element how can I do it.
You should check if selectedIndex is not 0 for all your select elements.
$(document).on('change', 'select', function () {
var allChanged = true;
// check if there is any other select element which was not changed
$('select').each(function () {
if (this.selectedIndex == 0) {
allChanged = false;
}
});
// if all select elements have been changed
if (allChanged) {
alert('BOTH CHANGED');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-heading">
<select id="loading-by-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
<select id="loading-by-sub-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
</div>
Just a side note, use .filter() :
$('select').change(function() {
var m = $(this).siblings('select').addBack();
var n = m.filter(function(){
return $(this).val() == null && $(this)
});
if ( !n.length ) alert('both selected')
});
DEMO