如何使用JQuery创建条件下拉菜单?

时间:2014-09-23 05:13:10

标签: javascript jquery html css

我正在尝试根据另一个下拉列表选择创建一个下拉列表。 如果选择Brand PreferenceBrand Purchased,则应显示DIV select_a_brand。我使用以下代码。它会隐藏DIV select_a_brand,但当我选择Brand PreferenceBrand Purchased选项时,仍会隐藏DIV select_a_brand。它没有显示。我该如何解决这个问题?

<div class="row">
    <label class="form_controller required">By Brand</label>
    <select style="width: 218px;">
        <option>Select an option</option>
        <option id="brand_preference">Brand Preference</option>
        <option id="brand_purchased">Brand Purchased</option>
    </select>
    <div id="select_a_brand">   
        <?php echo $form->dropDownList($model,'brand_id', gGetBrandList('brand_id', 'brand_id, brand_name'), array('prompt'=>'Select a brand')); ?> 
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            jQuery('#select_a_brand').hide();                   

            jQuery('#brand_preference').select(function(){
                jQuery('#select_a_brand').show();    
            });             
        });
    </script>           
</div>

1 个答案:

答案 0 :(得分:1)

你应该使用适当的jquery的change事件处理程序;另外,您必须绑定到父选择框。我已经更改了jsfiddle,现在效果很好:请参阅下面的代码:

 $(document).ready(function() {
    jQuery('#select_a_brand').hide();                   

    jQuery( "#base_option" ).change(function() {     


        if($(this).val() == "Brand Purchased" ){
           alert( "Handler for .change() called." );
        }
    });

});

选择不是事件只是api来选择下拉列表的特定索引/值。