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

回答

相關問題