【问题标题】：jQuery dropdown hide show div based on valuejQuery下拉隐藏显示div基于值
【发布时间】：2014-08-29 20:37:00
【问题描述】：

这是一个经典问题，但找不到最佳方法。我有一个 ID 为 project_billing_code_id 和 3 个值（1、2、3）的下拉列表。

如果选择的值 = 1，则显示 id 为 1 的 div，并且仅显示这个。 div 2 和 3 必须隐藏。我也想在加载视图时实现这一点，而不仅仅是在更改时。

$(document).ready(function() {
  $("#hourly").hide();
  $("#per_diem").hide();
  $("#fixed").hide();
$("#project_billing_code_id").change(function() {
  if ($("#project_billing_code_id").val() == '1') {
   $("#hourly").show();
   }
  else if ($("#project_billing_code_id").val() == '2') {
   $("#per_diem").show();
   } 
  else if ($("#project_billing_code_id").val() == '3') {
   $("#fixed").show();
   }
  else { 
       $("#hourly").hide();
       $("#per_diem").hide();
       $("#fixed").hide();
       }
  });
});

【问题讨论】：

您只需将$("#per_diem").hide();$("#fixed").hide()添加到$("#hourly").show()，其他条件相同。因此，当您显示一个 div 时，其他人保持隐藏状态。

标签： jquery drop-down-menu

【解决方案1】：

你很亲密。您可能需要对行为进行一些小的调整，以确保所有 div 都隐藏并且在页面加载时显示正确的 div。

在这里玩一下代码：http://jsfiddle.net/irama/ZFzrA/2/

或者在这里获取更新的 JS 代码：

hideAllDivs = function () {
    $("#hourly, #per_diem, #fixed").hide();
};

handleNewSelection = function () {

    hideAllDivs();

    switch ($(this).val()) {
        case '1':
            $("#hourly").show();
        break;
        case '2':
            $("#per_diem").show();
        break;
        case '3':
            $("#fixed").show();
        break;
    }
};

$(document).ready(function() {

    $("#project_billing_code_id").change(handleNewSelection);

    // Run the event handler once now to ensure everything is as it should be
    handleNewSelection.apply($("#project_billing_code_id"));

});

让我们知道你的进展！

【讨论】：

嗨@Gaelle你能澄清你说的值被保存的意思吗？您可以发布完整的代码示例吗？（您可能想尝试编辑jsfiddle.net/irama/ZFzrA/1 - 单击运行以测试您的代码，完成后单击更新，并在此处将新 URL 添加到评论中。）
这就是发生的事情。值 saved=2 ，表单加载显示 per_diem。伟大的。如果我选择值 3，则删除 per_diem 但未显示固定。如果 value saved=3 表单加载并显示固定，但如果我选择 value2 然后固定删除但 per_diem 未显示。但是，如果我选择值 1 它工作正常。
谢谢@Gaelle - 只是为了确保我理解你：听起来价值正在保存在服务器端？然后你正在重新加载/重新访问页面，这是成功的，但是一旦你再次更改值，所有的 div 都被隐藏了？如果是这样，您能否发布一个在您重新加载/重新访问页面时呈现的 HTML 副本？
您好@Gaelle - 听起来这可能是保存页面后呈现的 HTML 的问题。你有运气吗？
问题来自生成的 HTML。现在修好了。您的解决方案就像一个魅力。非常感谢。我很感激

【解决方案2】：

不要在 document.ready 中使用 hide，因为它必须等待 dom 加载。添加内联样式="display:none;"

在 if 语句中删除 $("#project_billing_code_id") 分配并使用 this 代替，因为您已经可以通过事件处理程序访问 dom 元素，请使用 $(this).val() 或 this.val() .还要使您的代码可重用，以便您可以从不同的脚本中调用它。

var PayRate = (function(){

    var _obj = {};

    var hideShow = function(elem){
        if($(elem).val() === '1'){
              $("#hourly").show();
            }else if($(elem).val() === '2'){
              $("#per_diem").show();    
            }else if($(elem).val() === '3'){
              $("#fixed").show();
            }else{
              $("#hourly, #fixed, #per_diem").hide();
            }
    };

    _obj.checkValue = function(){
        hideShow($('#project_billing_code_id'))
    };

    var events = function(){
        $('#project_billing_code_id').change(function(){
           hideShow(this);
        });
    };

    $(document).ready(function(){
        events ();
        checkValue ();
    });

    return _obj;

}());

我没有测试上述内容，因此您可能需要进行一些更改。我想你明白了。 :)

【讨论】：

【解决方案3】：

Working Fiddle

这就是我为我工作的方式。

$(document).ready(function (e) {
    $('#reasonDropDown').change(function () {
        if ($(this).val() == 'other') {
            $('.otherReasonTextBox').show();
        } else {
            $('.otherReasonTextBox').hide();
        }
    });
});

CSS

 .otherReasonTextBox {
     display:none;
 }

HTML

<select id="reasonDropDown" name="Select">
    <option>Select One</option>
    <option>Select Two</option>
    <option>Select Three</option>
    <option value="other" id="other">Other</option>
</select>
<div class="otherReasonTextBox">Other Reason Textbox</div>

【讨论】：

【解决方案4】：

使用 jquery 隐藏和显示 div 标签

$(document).ready(function() {

    setOptions(); // on load
    $('#Drodown_id').change(setOptions); // on change
    function setOptions() {       
        switch ($("#Drodown_id").val()) {
            case "option_1" :
                $("#div1").show();
                $('#div2').hide();
                break;
            case "option_2":
                $("#div1").hide();
                $("#div2").show();
                break;
            case "option_3":
                $("#div1").show();
                $("#div2").show();
                break;
            case "":
                $("#div1").hide();
                $("#div2").hide();
                break;
            }
    }); 
});

【讨论】：