從html和javascript中的下拉選擇中調用函數

Question

好的，我當時在編寫一個簡單的HTML程序，但遇到了一些問題。

我想創建一個在選擇下拉列表中的某些選項時調用的函數。 我的設置看起來像這樣。

<input type="number" id="int_c" value="" style="display:none">

<select id="mode">
        <option id="prtr" selected="myFunction()"> Selection 1 </option>
</select>

<script>
    function myFunction(){
document.getElementById("int_c").style.display = "block";
}
</script>

). 那是行不通的，甚至沒有達到功能（我用測試了它）。 that calls the function in .It also didn't work. 所以我也試圖把調用的 。它的功能還沒有工作的 。 有任何想法嗎？

Answer 1

嘗試將函數添加到select的onchange事件處理程序中。 此外，您至少需要兩個選擇選項

 function myFunction(elem) { console.log(elem.value) document.getElementById("int_c").style.display = "block"; } 

 <input type="number" id="int_c" value="" style="display:none"> <select id="mode" onchange="myFunction(this)"> <option> select </option> <option id="prtr" value="test"> Selection 1 </option> </select> 

Answer 2

該事件需要在<select>而不是<option>上調用。

<input type="number" id="int_c" value="" style="display:none">

<select id="mode" onchange="myFunction(this)">
        <option id="prtr"> Selection 1 </option>
</select>

<script>
    function myFunction(elem){
        var selectedValue = elem.value;
        document.getElementById("int_c").style.display = "block";
}
</script>

Answer 3

1. 在select標簽上添加onchange事件
2. 使用event.target.value檢查選定的值
3. 調用你的函數

 document.getElementById("mode").addEventListener("change",function(event){ if(event.target.value ==="3"){ document.getElementById("int_c").style.display = "block"; } }) 

 <input type="number" id="int_c" value="" style="display:none"> <select id="mode"> <option value="1"> Selection 1 </option> <option value="2"> Selection 2 </option> <option value="3"> Selection 3 </option> </select> 

Answer 4

選項上沒有selected事件。 您將需要使用select框本身的change事件：

 var selectBox = document.getElementById('mode'); var numberInput = document.getElementById('int_c'); function handleModeChanged(e) { var value = e.target.value; console.log('Mode has changed.'); if (value === 'selection1') { console.log('Show input.'); numberInput.style.display = 'inline-block'; } else { console.log('Hide input.'); numberInput.style.display = 'none'; } } selectBox.addEventListener('change', handleModeChanged); 

 <input type="number" id="int_c" value="" style="display:none"> <select id="mode"> <option>Select</option> <option value="selection1">Selection 1</option> <option value="selection2">Selection 2</option> </select> 

Answer 5

您需要將事件更改附加到選擇框，一旦選擇了任何選項，則將根據該調用來調用該函數。

 var selectBox = document.getElementById("mode"); selectBox.addEventListener("change", function(){ myFunction(); }); function myFunction(){ document.getElementById("int_c").style.display = "block"; } 

 <input type="number" id="int_c" value="" style="display:none"> <select id="mode"> <option id="none"> none </option> <option id="prtr"> Selection 1 </option> </select> 

Answer 6

嘗試這樣的事情。 您需要在頁面頂部包含jQuery。

<input type="number" id="int_c" value="" style="display:none">

<select id="mode">
        <option>Select a value.</option>
        <option id="prtr">Selection 1</option>
</select>

<script>
     $("#mode").on("change",
         function(){
              var option = $(this).find("option:selected").html();
              if(option == "Selection 1"){
                  document.getElementById("int_c").style.display = "block";
              }
     });
</script>

再次確保將jQuery包含在您的腦海中。 這將獲取下拉列表的ID，並且當列表更改時，它將提取html值，在您的情況下為“選擇1”。 我已經刪除了選項中的所有間距

然后有一個條件if語句，用於檢查html值是否等於“選擇1”。 我會在小提琴中嘗試一下，看看會發生什么

編輯：我還為您的選擇器添加了默認值，因此它最初並未設置為選擇1。

edit2：鏈接到js小提琴： https : //jsfiddle.net/nj3fsdnv/

它為我工作。