0

这就是我想要做的。页面加载时，将选择“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();
}
});
4

4 回答 4

2

只需根据选择值切换输入的可见性：

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

小提琴

于 2013-07-20T21:02:15.647 回答
0

首先初始化状态，以及 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() 检查变量的值 - 然后您的脚本执行哪些操作就会变得很明显。

于 2013-07-20T21:02:57.593 回答
0

您需要检查所选值。

var empSelect =$('select[name="employee_choice"]').val()

如果你也可以使用 else 而不是多个

于 2013-07-20T20:56:47.013 回答
0

您需要在页面加载时首先运行它。正如在这个 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(); 
});
于 2013-07-20T20:59:32.640 回答