此jQuery下拉菜单代码有什么问题

时间:2019-01-21 23:07:55

标签: javascript jquery

我发现一个简单的代码片段非常适合2个从属下拉列表,但是现在我需要添加一个依赖于第二个下拉列表的选择的第三个下拉列表,我尝试更改代码,但没有用,对不起,我完全JS中的新功能。.我最近才开始学习php ...

请注意,原始代码段使用值代替ID进行过滤,由于我想在POST请求中使用选择值,因此我对其进行了更改。

    var $select1 = $( '#select1' ),
    		$select2 = $( '#select2' ),
        $select3 = $( '#select3' ), // I added that line but not sure if its correct
        
        $options_a = $select2.find( 'option' );
    		$options_b = $select3.find( 'option' ); // I added that line but not sure if its correct
        
    $select1.on( 'change', function() {
    	$select2.html( $options_a.filter( '[id="' + this.value + '"]' ) );
    } ).trigger( 'change' );
    
    // I added the next lines for select3 but not sure if they are correct
    $select2.on( 'change', function() {
    	$select3.html( $options_b.filter( '[id="' + this.value + '"]' ) );
    } ).trigger( 'change' );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
        <option value="" disabled selected>Select your option</option>
        <option value="1" id="1">Fruit</option>
        <option value="2" id="2">Animal</option>
        <option value="3" id="3">Bird</option>
        <option value="8" id="4">Car</option>
    </select>
    
    <select name="select2" id="select2">
        <option value="" disabled selected>Select your option</option>
        <option value="1" id="1">Banana</option>
        <option value="2" id="1">Apple</option>
        <option value="3" id="1">Orange</option>
        <option value="4" id="2">Wolf</option>
        <option value="5" id="2">Fox</option>
        <option value="6" id="2">Bear</option>
        <option value="7" id="3">Eagle</option>
        <option value="8" id="3">Hawk</option>
        <option value="9" id="4">BWM<option>
    </select>
    
    <select name="select3" id="select3">
        <option value="" disabled selected>Select your option</option>
        <option value="1" id="1">Small</option>
        <option value="2" id="2">Medium</option>
        <option value="3" id="2">Large</option>
        <option value="4" id="3">Large</option>
    
    </select>

0 个答案:

没有答案