Question

我是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>

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

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

最好的方法是什么？

Answer 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

Answer 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/

Answer 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

Answer 4

将其放在页面底部（如果您已将jquery包含在此页面中）：

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

Answer 5

您可以在onchange代码附加select事件，并可以执行您想要的操作。像

这样的东西

<强> 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

Answer 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

参考文献：

ChildNode.nextElementSibling ^{compatibility}。
document.querySelector() ^{compatibility}。
EventTarget.addEventListener() ^{compatibility}。

Javascript - 当选择选项时显示TextField

6 个答案: