If user choose any option from list which contains C-D (in value or label it doesn't matter in this case) I would like to show next option list.
I tried with contains() Selector but somewhere there is a mistake.
My HTML structure:
<script>
$(function () {
$("#choose-material").change(function() {
var val = $(this).val();
if(val:contains('C-D')) {
$("#choose-size").show();
}
});
});
</script>
#choose-size {display: none;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
The :contains() selector is intended for use in jQuery objects. To check if the val string contains C-D you can instead use indexOf().
Also note that you can simplify the logic by using toggle() and providing a boolean result as an argument which will in turn show or hide the given element. Finally, note that your CSS had a trailing ) instead of }.
With all that said, try this:
$(function() {
$("#choose-material").change(function() {
$("#choose-size").toggle($(this).val().indexOf('C-D') != -1);
}).change();
});
#choose-size {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
You can use String.prototype.includes()
Note that for more browser compatibility you can use String.prototype.indexOf() like this $(this).val().indexOf('C-D') !== -1
Code:
$('#choose-material').change(function() {
if ($(this).val().includes('C-D')) {
$("#choose-size").show();
}
});
#choose-size {display: none;)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
Try below code:
$(function () {
$("#choose-material").change(function() {
var val = $(this).val();
if(val.indexOf("C-D")>=0) {
$("#choose-size").show();
}
});
});
You can check if the selected value contains the C-D substring via a regex of shape /C-D/g, as such:
$(function () {
$("#choose-material").change(function() {
var val = $(this).val();
if(val.match(/C\-D/g)) {
$("#choose-size").show();
}
});
});
#choose-size {display: none;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
.contains() and .includes() are both experimental, re: non-standard. I would not recommend their use in production systems. I'd stick with .indexOf() for now.
It's easy with the indexOf method, you can see a tutorial of indexOf and substring here: http://www.dreamsyssoft.com/javascript-shell-scripting/strings-tutorial.php
#choose-size {display: none;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
$("#choose-material").change(function() {
var val = $(this).val();
if(val.indexOf('C-D') !== -1) {
$("#choose-size").show();
} else {
$("#choose-size").hide();
}
});
});
</script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
You have several issues with your code:
You are missing the $("#choose-size").hide(); when the value do not contain C-D
You need to use indexOf() or includes() to check if the value contains C-D. Preference is to use indexOf() as includes() do not work in IE browser.
$(function () {
$("#choose-material").change(function() {
var val = $(this).val();
if(val.indexOf('C-D') !== -1) {
$("#choose-size").show();
} else {
$("#choose-size").hide();
}
});
});
#choose-size {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="material-type" id="choose-material">
<option value="C-D">C-D</option>
<option value="VV_C-D">VV_C-D</option>
<option value="VV_C-B">VV_C-B</option>
<option value="B_C-D">B_C-D</option>
<option value="GL_WW">GL_WW</option>
</select>
<select name="material-size" id="choose-size">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Big">Big</option>
</select>
Related
I have this Fiddle : https://jsfiddle.net/Ardee12/tL643rjq/3/
My problem is, I always get the same options at the third select from second select (vice versa), after I select an option from the first one. I need to stick for their own option (second and third select), but still have the populated function from their "rel" attribute. Can anyone please help me?
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
You need to treat each of the kidSelect individually. Loop through each of them at the beginning and store a clone of their own options in each instance.
Then when you change main select, filter each set separately
// store a clone of each kidSelect options on page load
$('.kidSelect').each(function() {
$(this).data('options', $(this).children().clone());
});
$(".mainSelect").change(function() {
var rel = this.options[this.selectedIndex].getAttribute('rel');
// filter each kids options and set in place
$('.kidSelect').html(function() {
return $(this).data('options').filter('[rel=' + rel + ']').clone();
});
// trigger the change on page load also to do initial filtering
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
I'm not entirely sure what you're trying to do but here is a guess.
I think you only want to effect the second select with the changes. For that you need to adjust your selector. It currently selects both selects.
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.js-kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.js-kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect js-kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
I have select :
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
...
<option value="37">Switzerland</option>
...
</select>
How can I move option with text Switzerland to the second position in the list ? Result will be :
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="37">Switzerland</option>
<option value="40">Afghanistan</option>
...
</select>
You can use jquery after() to place it after the first-child in the select - see demo below:
$('select[name=country_id] option:first-child').after($('select[name=country_id] option[value=37]'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="37">Switzerland</option>
</select>
You can get all of the <option> elements, and then filter them by the value attribute. Finally, once you have the correct element selected (in this case for Switzerland), you can use insertBefore() to move its location in the DOM.
Example:
var $opts = $('.selCommon').children();
$opts.filter('[value="37"]').insertBefore( $opts.eq(1) )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="40">United Kingdom</option>
<option value="40">USA</option>
<option value="37">Switzerland</option>
</select>
You can also try this:
$(document).ready(function(){
var options = $('.selCommon option' );
var SwitzerlandIndex=0;
var cnt=0;
$(options).each(function(){
if($(this).text() == "Switzerland"){
SwitzerlandIndex=cnt;
}
cnt++;
});
$(options[SwitzerlandIndex]).insertAfter($(options[0]));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="41">Test</option>
<option value="37">Switzerland</option>
<option value="38">Test 2</option>
</select>
You can sort on the value
$('.selCommon option').sort((a, b) => a.value - b.value).appendTo('.selCommon');
$('.selCommon').val("")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selCommon" name="country_id">
<option value="">Select</option>
<option value="40">Afghanistan</option>
<option value="57">Sweden</option>
<option value="37">Switzerland</option>
<option value="12">USA</option>
</select>
How i update combobox based on another combobox, i have this code but its not work, can someone help me. Thanks
<select name="marca" id="marca" onchange="javascript:carregaModelos(this.value)" >
<option th:each="marca : ${marcas}"
th:value="${marca.idmarca}"
th:text="${marca.nomemarca}">Marca</option>
</select>
<select name="modelo" id="modelo">
<option th:each="modelo : ${modelos}"
th:value="${idmodelo}"
th:text="${nomemodelo}">Modelo</option>
</select>
<script type="text/javascript">
function carregaModelos(marca) {
var opcao = $(this).('#marca option')
console.log(opcao);
jQuery("#modelo").load( "pesquisa/" + opcao);
return false;
}
and this
#RequestMapping("/pesquisa/{idmarca}")
public String pesquisa(ModelMap model, #PathVariable Long idmarca) {
model.addAttribute("modelo", service.obterModelosByMarcas(idmarca));
return "index";
Add an attribute with value to target element.
data-target-sync="#targetElementId"
The value is jQuery selector so # included with ID of target element
$(document).ready(function() {
$('[data-target-sync]').change(function() {
var cur = $(this);
$(cur.attr('data-target-sync')).val(cur.val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="marca" id="marca" data-target-sync="#modelo">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<select name="modelo" data-target-sync="#marca" id="modelo">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
I want to find if a option is in the dropdown and use its value.
this is NOT when selected. I purely want to scan the list for Procedures and get the value from it.
<select class="FormDropDown " id="procedure-category-fld" name="procedure-category-fld">
<option value=""></option>
<option value="4">Cause</option>
<option value="5">Disorder</option>
<option value="6">Procedure</option>
</select>
You can use .filter():
var value = $('#procedure-category-fld option').filter(function (idx, ele) {
return ele.textContent == "Procedure";
}).val();
console.log(value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="FormDropDown " id="procedure-category-fld" name="procedure-category-fld">
<option value=""></option>
<option value="4">Cause</option>
<option value="5">Disorder</option>
<option value="6">Procedure</option>
</select>
You can take the option elements from within the select you have and extract their value/text using jquery:
$(function() {
$('#procedure-category-fld option').each(function(i, el) {
console.log($(el).val(), $(el).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="FormDropDown " id="procedure-category-fld" name="procedure-category-fld">
<option value=""></option>
<option value="4">Cause</option>
<option value="5">Disorder</option>
<option value="6">Procedure</option>
</select>
I have 2 dropdowns, here is the fiddle,
https://jsfiddle.net/oqsf7gjq/1/
<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
When user selects "Yes" from "ddlOption" dropdown, then I want to show only 2 values (Saab and Audi) for dropdown "ddlCar" and when user selects "No", then I want to see all values for "ddlCar" dropdown.
Please suggest me any possibilities with Jquery code. Thanks!
jsFiddle example
$("#ddlOption").change(function() {
$("#ddlCar").val("").find("[value=1], [value=3]").toggle( this.value==="2" );
});
$("#ddlOption").change(function() {
$("#ddlCar").val("").find("[value=1], [value=3]").toggle( this.value==="2" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
Toggle the desired option elements by checking Boolean the first select's value (this.value==="2")
Also, reset to .val("") in order to make sure the second select value is properly cleared from possible previous changes.
$('#ddlOption').change(function(){
var txt = $(this).val();
alert(txt);
if(txt==1){
$('#ddlCar option[value="1"]').hide();
$('#ddlCar option[value="3"]').hide();
}
else{
$('#ddlCar option[value="1"]').show();
$('#ddlCar option[value="3"]').show();
}
});
Fiddle
http://jsfiddle.net/ue4Cm/38/
Tested in Edge, Chrome, Firefox and Internet Explorer 11
Note that hiding and showing the options doesn't work in Edge or IE. The elements need to be really removed.
$(function() {
var $ddlCar = $("#ddlCar");
var $ddlCarOptions = $ddlCar.children("option");
$("#ddlOption").change(function() {
if ($(this).val() === "1") {
$ddlCarOptions.filter(".toggleable").attr("selected", false).remove();
} else {
$ddlCar.empty().append($ddlCarOptions);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/>
<br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option class="toggleable" value="1">Volvo</option>
<option value="2">Saab</option>
<option class="toggleable" value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
Check updated fiddle
In your markup, you need to add classes to the dropdown values first
<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1">Volvo</option>
<option value="2" class="yes">Saab</option>
<option value="3">Mercedes</option>
<option value="4" class="yes">Audi</option>
</select>
In your jquery code now
$(function() {
$("#ddlOption").change(function() {
var selectedValue = $(this).val();
if (selectedValue == 1)
{
$("#ddlCar option").hide();
$("#ddlCar option.yes").show();
}
else
{
$("#ddlCar option").show();
}
});
});
please check the code below I have made few changes to your code
<script type="text/javascript">
function populateList() {
if($("option:selected",$("#ddlOption")).val()=="1")
{
$(".val1").hide();
$(".val2").show();
}
else if($("option:selected",$("#ddlOption")).val()=="2")
{
$(".val1").show();
$(".val2").hide();
}
else
{
$(".val1").show();
$(".val2").show();
}
}
</script>
<select id="ddlOption" onchange="populateList();">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1" class="val2">Volvo</option>
<option value="2" class="val1">Saab</option>
<option value="3" class="val2">Mercedes</option>
<option value="4" class="val1">Audi</option>
</select>
let me know if you have any doubts
You can write code as below which is also works for larger object value(300 or whatever size) and it is dynamic.
Here optionOne, optionTwo are object which is bind when Yes/No value selected
Updated Js fiddle link
$(function() {
var optionOne=[{text:"Saab",value:"2"},{text:"Audi",value:"4"}];
var optionTwo=[{text:"Volvo",value:"1"},{text:"Saab",value:"2"},{text:"Mercedes",value:"3"},{text:"Audi",value:"4"}];
$("#ddlOption").change(function() {
var selectedValue=$(this).val();
$('#ddlCar').html('');
var mySelect = $('#ddlCar').append($('<option></option>').val("").html("- Please select a name -"));
if(selectedValue==='1'){
$.each(optionOne, function(index, item) {
mySelect.append($('<option></option>').val(item.value).html(item.text));
});
}else if(selectedValue==='2'){
$.each(optionTwo, function(index, item) {
mySelect.append($('<option></option>').val(item.value).html(item.text));
});
}else{
//To Do if no selection
}
});
});
Try this: https://jsfiddle.net/oqsf7gjq/17/ not the cleanest solution but it will work cross browsing.
$(function() {
var carArray = [];
$('#ddlCar option').each(function() {
carArray.push($(this));
});
$("#ddlOption").change(function() {
if ($('#ddlOption').val() == 1) {
$('#ddlCar option').each(function() {
if ($(this).val() != 2 && $(this).val() != 4) {
$(this).remove();
}
})
} else {
$('#ddlCar option').each(function() {
$(this).remove();
})
for (var i in carArray) {
$('#ddlCar').append(carArray[i])
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/>
<br/>
<select id="ddlCar">
<option value="0">- Please select a name -</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>