Question

这就是我想要做的。页面加载时，将选择“Self”选项，旁边没有文本区域。当用户选择“其他”时，文本区域将显示在其旁边。任何帮助将非常感激。我已经坚持了一点，我准备拿出我留下的头发。

这是我的代码。

HTML

<select name="employee_choice" id="employee_choice" data-role="slider" data-theme="c"data-track-theme="a">
<option value="0">Self</option>
<option value="1">Other</option>
</select>

<input type="text" id="pernr" name="pernr" width="12em" />

JS

$('#employee_choice').change(function(){

var pernrField = $('#pernr');
var empSelect   = $('#employee_choice').val();

pernrField.hide();



if (empSelect == '1'){
pernrField.show();
}
if (empSelect == '0'){
pernrField.hide();
}
});

Answer 1

根据所选值切换输入的可见性：

$('#employee_choice').on('change', function() {
    $('#pernr').toggle(this.value==='1');
});

FIDDLE

Answer 2

您需要检查所选值。

var empSelect = $（'select [name =“employee_choice”]'）。val（）

而不是多次，如果你也可以使用其他

Answer 3

您需要在页面加载时首先运行它。 As seen in this jsFiddle，如果您将JavaScript更改为以下内容，则代码可以正常运行：

function showOrHidePernr() {
    var pernrField = $('#pernr');
    var empSelect = $('#employee_choice').val();
    pernrField.hide();

    if (empSelect == '1') {
        pernrField.show();
    }
    if (empSelect == '0') {
        pernrField.hide();
    }
}

$('#employee_choice').change(showOrHidePernr);
$(function() {
   showOrHidePernr(); 
});

Answer 4

首先初始化状态，同时初始化change（）事件：

show_pernrfield();

$('#employee_choice').change(function(){
    show_pernrfield();
});

function show_pernrfield() {
    var pernrField = $('#pernr');
    var empSelect   = $('#employee_choice').val();

    if (empSelect === '1') {
        pernrField.show();
    }
    else {
        pernrField.hide();
    }
}

看看：http://jsfiddle.net/YhaCh/1/

尝试使用console.log（）来检查变量的值 - 然后很明显你的脚本采取了哪些操作。

根据选择隐藏文本区域 - Jquery

4 个答案: