问题描述
在网页上,如果您在第一个下拉列表中选择不同的选项,则不同的选项会显示在第二个下拉列表中。
< select id =independent>
< option value =A> A< / option>
< option value =B> B< / option>
< / select>
< select id =dependent>
< option value =A021> A1< / option>
< option value =A22019> A2< / option>
< option value =A3541> A3< / option>
< option value =B148> B1< / option>
< option value =B2> B2< / option>
< option value =B397415> B3< / option>
< / select>
以下是我目前使用的jQuery:
($'$ $ $ $'$'$'$' endingChar = $(this).val().span('')。pop();
var selected = $('#independent').val();
$('#dependent option [value ^ ='+ selected +']')。toggle(endingChar == selected);
$('#dependent')。val('');
})
});
我在这里要做的是
1.将变量选中设置为在第一个下拉列表中选择的选项的值,即
2.使用该值查看所有第二个下拉选项的>第一个字母,以便填充我想在第二个下拉列表中看到的内容然而,当我从第一个下拉列表中选择任何东西时,所有选项(A1到B3)都出现在第二个下拉列表中。什么是错误的?
首先隐藏所有选项并仅显示使用toggleClass()的匹配选项
<$ c $($'('#'independent')。on('change',function(e){$('#dependent')。val(''); var endingChar = $(this)。 val()。split('')。pop(); var selected = $('#independent').val(); $('#dependent option')。addClass('show'); $('#dependent选项[value ^ ='+ selected +']')。toggleClass('show');})});
.show {display:none;}
< script src =https://ajax.googleapis.com/ ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< select id =independent> < option value =A> A< / option> < option value =B> B< / option>< / select>< select id =dependent> < option value =A021> A1< / option> < option value =A22019> A2< / option> < option value =A3541> A3< / option> < option value =B148> B1< / option> < option value =B2> B2< / option> < option value =B397415> B3< / option>< / select>
On a web page, if you select different options on the first drop-down, different options will appear in the second drop-down.
<select id="independent">
<option value="A"> A </option>
<option value="B"> B </option>
</select>
<select id="dependent">
<option value="A021"> A1 </option>
<option value="A22019"> A2 </option>
<option value="A3541"> A3 </option>
<option value="B148"> B1 </option>
<option value="B2"> B2 </option>
<option value="B397415"> B3 </option>
</select>
Here is the jQuery I have so far:
$(function() {
$('#independent').on('change', function (e) {
var endingChar = $(this).val().split('').pop();
var selected = $( '#independent' ).val();
$('#dependent option[value^='+selected+']').toggle(endingChar == selected);
$('#dependent').val('');
})
});
What I am trying to do here is
1. Set variable selected to the value of the option selected in the first drop-down
2. Use that value to look through the first letters of the values of all of the second drop-down possibilities to populate what I want to see in the second drop-down
However when I select anything from the first drop-down, all of the options (A1 through B3) appear in the second drop-down. What is wrong?
You could try like this.
First hide all the options and show only matching options using toggleClass()
$(function() {
$('#independent').on('change', function (e) {
$('#dependent').val('');
var endingChar = $(this).val().split('').pop();
var selected = $( '#independent' ).val();
$('#dependent option').addClass('show');
$('#dependent option[value^='+selected+']').toggleClass('show');
})
});
.show{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="independent">
<option value="A"> A </option>
<option value="B"> B </option>
</select>
<select id="dependent">
<option value="A021"> A1 </option>
<option value="A22019"> A2 </option>
<option value="A3541"> A3 </option>
<option value="B148"> B1 </option>
<option value="B2"> B2 </option>
<option value="B397415"> B3 </option>
</select>
这篇关于第二个下拉选项基于第一个下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!