Javascript - 在选择选项时显示TextField

我是JavaScript新手，我有以下问题。Javascript - 在选择选项时显示TextField

在我HTML代码是普通SELECT

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

我需要显示下SELECT只有当用户选择选择AudiTextFied。

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

这样做的最佳方法是什么？

来源

2014-03-30 user3414654

而你没有使用jQuery，而select没有ID，类或其他东西？ – adeneo

开始使用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

来源

2014-03-30 11:09:49 user6827

“这比javascript容易得多” 是不是jQuery的Javascript？ ....... – Mik378

对不起，改了它 – user6827

好吧，我会看看JQuery ...你的回答是最好的，因为当我改变选择回来时，它会起作用...谢谢 – user3414654

可以实现很容易使用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

来源

2014-03-30 11:03:25

你不处理“奥迪” – Mik378

我更新了@ Mik378，感谢您纠正我 –

这个问题的[tag：jquery]标签在哪里？ –

待办事项这个：

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

来源

2014-03-30 11:04:01

请注意，某些浏览器（特别是IE，或者也许只有*旧* IE）拒绝更改'type'属性。 –

@Amit是不错的做法，使用id只有'txt'获取文本元素，就像你没有做传统的方式'document.getElementById（'txt'）;'那些是同样的东西？ –

@SumanBogati，当你在html中声明一个id时，它就变成了js中的一个变量，你可以使用它的属性。如果您已经知道元素的ID，则不需要使用getElementById –

将这个页面的底部（前提是你已经包括jQuery的进入这个页面）：

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

来源

2014-03-30 11:09:21 Jay

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

您可以在附加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>

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

来源

2014-03-30 11:12:46

鉴于张贴的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。

参考文献：

来源

2014-03-30 11:24:40

Javascript - 在选择选项时显示TextField

回答

相关问题