Question

我打算在打开它时隐藏我的模态中的一些textareas，当更改选择选项时，隐藏或显示包含所有textareas的div。

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

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

我希望我可以在此页面上链接更多代码，但我担心我不知道问题在哪里= /我想唯一有趣的是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课程。

由于它是<select>，因此请添加空值的默认选项。

<option></option>

以下代码未附加到任何事件处理程序。它必须附加到<select>＆＃39; 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适合模态窗口中的所有内容：

#origin-display {overflow: hidden;}

小提琴：http://jsfiddle.net/qc2xy5qe/

Jquery / JS - 当选择选项更改时，隐藏模式中的Div

1 个答案: