Question

我的代码有问题所以如果你能帮我的话...... 所以我有选择框，当我选择第一个选项时，我需要显示某些形式的div，如果我选择了第二个选项，我需要显示另一个选择框..所以来自其他选择框的每个选项都可以显示两种不同的形式... 所以这是我的HTML：

<select id="customer-chose" data-placeholder="Choose">
    <option value="0" default selected="">Choose</option>
    <option value="current">1</option>
    <option value="not" class="next">2</option>
</select>
<select id="user" class="opt">
    <option value="0" disabled selected class="not">Chose</option>
    <option value="1" class="not">1a</option>
    <option value="2" class="not">2a</option>
</select>
<div id="current" class="customer" style="display:none">
    <form>
        First name: <input type="text" name="firstname"><br>
        Last name: <input type="text" name="lastname">
    </form>
</div>

这是我的jQuery：

$(document).ready(function() {
    $('#user').hide();
    $('#customer-chose').change(function(){
        $('.customer').hide();
        $('#' + $(this).val()).show();
    });
    $('#customer-chose').change(function() {
        if($(this).data('options') == undefined){
            $(this).data('options', $('#user option').clone());
        }
        $('#customer-chose option').click(function(){
            $("#user").hide();
        });
        if($('#customer-chose option:selected')) {
            $("#user").show();
        } else {
        $("#user").hide();
        }
        var id = $(this).val();
        var options = $(this).data('options').filter('[class=' + id + ']');
        $("#user").html(options);
    });
    $('#user').change(function(){
        $('.customer').hide();
        $('#' + $(this).val()).show();
    });
});

这里有小提琴：http://jsfiddle.net/9ARmX/

此代码正常运行但仅限于Firefox ...我需要在所有浏览器中工作...

Answer 1

我并不是100％肯定你想做什么 - 但我建议你做一些更通用的事情

通过在每个元素上定义何时显示它（我可以任意选择data-depand来表示），你可以设置每当选择值改变时显示哪个元素

在html中：

<select id="controller">
  <option value="0">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select> 

<div data-depand="1">This will be shown when "one" is selected</div>
<div data-depand="2">This will be shown when "two" is selected</div>

在Javascript中：

$(document).ready(function(){
  $("#controller").change(function(){
     var val = $(this).val();
     $("[data-depand]").hide();
     $("[data-depand='"+val+"'").show();
  }).trigger("change"); //triggering the change in the beginning to hide the relevant data
});

小提琴中的相同代码：http://jsfiddle.net/AY7bV/

与你的来源有关：http://jsfiddle.net/9ARmX/3/

使用jquery显示/隐藏多个选择框

1 个答案: