Javascript - 选择选项时显示 TextField答案

【问题标题】：Javascript - show TextField when select choice isJavascript - 选择选项时显示 TextField
【发布时间】：2014-03-30 10:57:57
【问题描述】：

我是 JavaScript 新手，遇到以下问题。

在我的HTML代码中是普通的SELECT

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

只有当用户选择Audi时，我才需要在SELECT下显示TextFied。

<input type="text" name="something">

最好的方法是什么？

【问题讨论】：

而且你没有使用jQuery，并且select没有ID、类或任何东西？

标签： javascript jquery select textfield

【解决方案1】：

开始使用JQuery (JQuery)。

这里是javascript：

$(document).ready(function(){
    // On Select option changed
    $("#someId").change(function(){
        // Check if current value is "audi"
        if($(this).val() === "audi"){
            // Show input field
            $("#textInputId").show();   //This changes display to block
        }else{
            // Hide input field
            $("#textInputId").hide();
        }
    });
});

这里是 HTML

<select id="someId">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input type="text" style="display:none;" id="textInputId" name="someName"/>

这是 JSFiddle 上的示例：

EXAMPLE

【讨论】：

是的，抱歉，已更改
好的，我会看看JQuery...你的答案是最好的，因为当我改变选择时它会生效...谢谢

【解决方案2】：

这样做：

<select id="select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="hidden" id="txt" name="something">

然后做这样的事情：

select.onchange=function(){
    if(select.value=="audi"){
       txt.type="text";    
    }
}

演示：http://jsfiddle.net/943xQ/

【讨论】：

请注意，某些浏览器（尤其是 IE，或者可能只有旧 IE）拒绝更改 type 属性。
@Amit 仅使用 id txt 获取文本元素是一种好习惯吗，就像您不采用传统方式 document.getElementById('txt'); 一样？
@SumanBogati，当你在html中声明一个id时，它在js中变成了一个变量，你可以使用它的属性。如果您已经知道元素的 id，则无需使用 getElementById
变量意味着它成为代表特定元素的节点，对吗？

【解决方案3】：

您可以像这样使用 jquery 轻松实现它：

这里是 HTML：

<select id="cars">
  <option value="-1">Select One</option>  
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

和文本字段：

<input type="text" name="something" id="txtCar" style="display:none;">

$('select#cars').change(function(){

if($(this).val() == "audi")
{
$('input#txtCar').show();
}

});

这里是DEMO

【讨论】：

你不和“奥迪”打交道
这个问题的jquery标签在哪里？

【解决方案4】：

将其放在页面底部（前提是您已经将 jquery 包含在此页面中）：

<script>
$('select').change(function () {
  if ($(this).val() == 'audi') {
    $(this).parent().append('<input type="hidden" name="something">');
  }
});
</script>

【讨论】：

如果您第二次选择值“audi”，则会附加第二个输入字段。我不认为他想要一个隐藏的领域，不是吗？

【解决方案5】：

您可以在select 标记处附加onchange 事件并执行您想要的操作。类似的东西

HTML

<div id="result">
<select id="mySelect">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>

JS

var select = document.getElementById("mySelect");
select.addEventListener("change", function() { 
if(this.options[this.selectedIndex].value == 'audi'){
        var input = document.createElement('input');
        input.type="text";
        input.id="txt";
        input.name="something";

        document.getElementById('result').appendChild(input);
    }
});

DEMO

【讨论】：

【解决方案6】：

鉴于已发布的 HTML，您在其中未使用特定标识符（class 或 id）来识别相关元素，并且鉴于您尚未指定任何 JavaScript 库的可用性，我建议您使用遵循“普通”JavaScript 解决方案：

function showInputWhen(evt,val){
    var el = evt.target;
    el.nextElementSibling.style.display = el.value.toLowerCase() == val.toLowerCase() ? 'inline-block' : 'none';
};

var selectEl = document.querySelector('select');

selectEl.addEventListener('change', function(e){
    showInputWhen(e,'audi');
});

JS Fiddle demo.

参考资料：

【讨论】：