Jquery/JS - 当 select 选项改变时在模态中隐藏 Div

Question

我试图在打开模态窗口时隐藏一些文本区域，在更改 select 选项时，隐藏或显示包含所有文本区域的 div。

我试图在这里解释所有 JS 代码：Demo

我并不是说代码很漂亮，我很乐意就此提出一些建议。

我希望我可以在这个页面上 link 更多代码，但恐怕我不知道问题出在哪里 =/ 我想唯一有趣的是 javascript/jquery 代码？

$('#create-popup').on('shown.bs.modal', function () {
    if (!$("#act_origin").val()) { //apparently when opening, the val is undefined
        $("#origin-display").hide();
    }
    //function when select is changing. 
    function origin() {
        if ($("#act_origin").val() == 1 ) { //HORSPAF
            $("#origin-display").hide();            
        } else  {
            $("#origin-display").show();
        }
    };
});

我也试过（阅读其他答案时）

if ($("#act_origin option:selected").text() === "HORSPAF")

和

$("#create-popup").find('#origin-display').hide();

我可能用错了，但它似乎也不起作用 =(

提前致谢。

Answer 1

当你打开模式时，它已经有了一个值。所以您的以下检查不起作用：

//apparently when opening, the val is undefined

将 if 条件替换为：

$("#origin-display").hide();

或者更好，添加一个 hidden class。

并且因为它是 <select>，添加一个空值的默认选项。

<option></option>

并且以下代码未附加到任何事件处理程序。它必须附加到 <select> 的 change 事件。所以这样做：

// function when select is changing.    
function origin() {
    if ($("#act_origin").val() == 1 ) { //HORSPAF
        $("#origin-display").hide();
    } else  {
        $("#origin-display").show();
    }
}
$("#act_origin").change(origin);

最后，给这个 CSS 以适应模态 window:

中的所有内容

#origin-display {overflow: hidden;}

Fiddle: http://jsfiddle.net/qc2xy5qe/

Jquery/JS - 当 select 选项改变时在模态中隐藏 Div

Jquery/JS - hide Div in modal when select options changes

html

jquery

modal-dialog

hide

twitter-bootstrap