[英]select box auto select
I want to create auto select box using jQuery
or JavaScript
.I have four select box. 我想使用
jQuery
或JavaScript
创建自动选择框。我有四个选择框。 If I choose one select box from every select box, I want to choose auto select for other select box. 如果我从每个选择框中选择一个选择框,那么我想为其他选择框选择自动选择。 Now, my design is depending on first select box.
现在,我的设计取决于第一个选择框。 How can I do that ?
我怎样才能做到这一点 ? Please help me.
请帮我。
html html
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<select name="select3" id="select3">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
javascript JavaScript的
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$select3 = $( '#select3' ),
$select4 = $( '#select4' ),
$option2 = $select2.find( 'option' ),
$option3 = $select3.find( 'option' ),
$option4 = $select4.find( 'option' );
$select1.on( 'change', function() {
$select2.html( $option2.filter( '[value="' + this.value + '"]' ) ),
$select3.html( $option3.filter( '[value="' + this.value + '"]' ) ),
$select4.html( $option4.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );
for me I think it's a bad thing to duplicate the options value .. so you need to use data
attribute it will help you to get the right value in the next selection .. you can use the next code 对我来说,我认为复制options值是一件坏事..因此您需要使用
data
属性,它将帮助您在下一个选择中获得正确的值..您可以使用下一个代码
$(document).ready(function(){ $('#select1').on('change' , function(){ var getVal = $(this).val(); // get value from the 1st select $('#select2 option').hide(); // hide all option for the 2nd select $('#select2 option[data-value="'+getVal+'"]').show().first().prop('selected' , true); // show the options which data-value = the first select value and select the 1st one of them $('#select3 option').hide(); // while you don't have duplicated value on select3 you can just use value instead of using `data` attribute $('#select3 option[value="'+getVal+'"]').show().prop('selected' , true); }).change(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="select1" id="select1"> <option value="1">Fruit</option> <option value="2">Animal</option> <option value="3">Bird</option> <option value="4">Car</option> </select> <select name="select2" id="select2"> <option data-value="1" value="1">Banana</option> <option data-value="1" value="2">Apple</option> <option data-value="1" value="3">Orange</option> <option data-value="2" value="4">Wolf</option> <option data-value="2" value="5">Fox</option> <option data-value="2" value="6">Bear</option> <option data-value="2" value="7">Eagle</option> <option data-value="3" value="8">Hawk</option> <option data-value="4" value="9">BWM<option> </select> <select name="select3" id="select3"> <option value="1">Fruit</option> <option value="2">Animal</option> <option value="3">Bird</option> <option value="4">Car</option> </select>
Explanation: What code above doing When change select1 说明: 上面的代码在做什么时更改select1
while you don't have duplicated values on select3 but if you've duplicated values you can use data
attribute which used with select2 虽然在select3上没有重复的值,但是如果您有重复的值,则可以使用与select2一起使用的
data
属性
[value]
attribute equal the value selected from the 1st select and select it [value]
属性等于从第一个选择中选择的值,然后选择它 you need to store your values in arrays and according to your first dropdown selection you need to assign respected array values to seccont dropdown 您需要将值存储在数组中,并且根据您的第一个下拉选择,您需要为seccont下拉列表分配受尊重的数组值
I cant understand what is dropdown2 and dropdown3? 我不明白什么是dropdown2和dropdown3?
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$select3 = $( '#select3' ),
$select4 = $( '#select4' ),
$option2 = $select2.find( 'option' ),
$option3 = $select3.find( 'option' ),
$option4 = $select4.find( 'option' );
var objectTypeValues = ['Fruit','Animal','Bird','Car'];
var fruiteValues = ['Banana','Apple','Orange',''];
var carValues = ['BWM'];
var animalValues = ['Wolf','Fox','Bear'];
var birdValues = ['Eagle','Hawk'];
$select1.on( 'change', function() {
var valuesTobeBind = null;
console.log(this.value);
switch(this.value){
case 'Fruit':
valuesTobeBind = fruiteValues;
break;
case 'Animal':
valuesTobeBind = animalValues;
break;
case 'Bird':
valuesTobeBind = birdValues;
break;
case 'Car':
valuesTobeBind = carValues;
break;
}
$select2.html('');
var selecthtml;
for (var i = 0; i<=valuesTobeBind.length; i++){
selecthtml+='<option value="'+ valuesTobeBind[i]+'">'+ valuesTobeBind[i]+'</option>';
}
$select2.html(selecthtml);
});
Please ignore select3
and select4
from my code 请忽略我的代码中的
select3
和select4
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.