Javascript - 选择时显示文本字段

Javascript - show TextField when select choice is

本文关键字：文本 字段 显示 选择 Javascript      更新时间：2023-09-26

我是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（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 上的示例：

例

这样做：

<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";    
    }
}

Demo：http：//jsfiddle.net/943xQ/

你可以像这样使用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();
}
});

这是演示

把它放在页面底部（前提是你已经将jquery包含到这个页面中）：

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

您可以在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);
    }
});

演示

鉴于发布的 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小提琴演示。

引用：

  • ChildNode.nextElementSibling兼容性。
  • document.querySelector()兼容性。
  • EventTarget.addEventListener()兼容性。
相关文章：