第二个下拉选项基于第一个下拉菜单 [英] Second drop-down options based on first 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> 
  

以下是我目前使用的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>

这篇关于第二个下拉选项基于第一个下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！