更改使用JavaScript選擇標記值

我在嘗試使用JavaScript更改來自選擇標記的值。假設我有這個文本框，並且如果該文本框爲空，則不會進行任何更改，並且選擇標記選項的值將保持原樣。但是如果該文本框被填充，那麼除了選擇標籤選項中的值之外，我必須分配一個不同的值。更改使用JavaScript選擇標記值

這裏就是我想要做的事：

HTML：

<input type="text" id="txtTest" /> 
<select name="rdoSelect" id="rdoSelect"> 
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option> 
</select>

的JavaScript：

if (document.getElementById('txtTest').value===null) 
{ 
    document.getElementById('rdoSelect').value; 
} 
else 
{ 
    document.getElementById('rdoSelect').value = "option 3"; 
}

我不能使它發揮作用。我試着將其指向一個元素/變量，而不是一個數值，它仍然不工作：

var test = document.getElementById('rdoSelect'); 
test.value = "option 3";

我需要幫助，請。謝謝！

來源

2013-08-02 edsonski

你必須改變'的選項元素selected'屬性（在此之前，取消選擇所有選項） –

的文本輸入的值永遠不會'null'。如果輸入中沒有文本，則值爲''''。這沒有做什麼：'document.getElementById（'rdoSelect'）。value;'。您可以通過設置其'selectedIndex'來更改'select'元素的選定值。雖然設置'select'元素的'value'可能在某些瀏覽器中有效，但你不能依賴它在所有瀏覽器中完成這項工作。 – Teemu

爲什麼你比較null而不是空白字符串？ '==「」' – hallaji

嘗試使用SelectIndex方法。請參考下面的代碼。

我添加了OnChange事件來輸入文本來測試這個示例。

<html> 
<head> 
<script language="javascript"> 

    function test() 
    { 
     if (document.getElementById('txtTest').value=='') 
     { 
      document.getElementById("rdoSelect").selectedIndex = 0; 
     } 
     else 
     { 
      document.getElementById("rdoSelect").selectedIndex = 1; 
     } 
    } 

</script> 
</head> 
<body> 
<input type="text" id="txtTest" onchange="test();" /> 
<select name="rdoSelect" id="rdoSelect"> 
    <option value="option1">Option 1</option> 
    <option value="option2">Option 2</option> 
</select> 
</body> 
</html>

來源

2013-08-02 12:27:56 SMS

我其實覺得這很容易。謝謝！ – edsonski

這是發生在按鈕點擊或onkeyup？無論哪種方式的功能，您可以添加值以此來DROPDOWNLIST：

dropdownlist.append(
    $("<option selected='selected'></option>").val(sValId).html(sVal) 
);

或者你colud試試這個

var optn = document.createElement("OPTION"); 
optn.text = "--Select--"; 
optn.value = "0"; 
baseCurve.options.add(optn);`

來源

2013-08-02 12:24:13 hima

HTMLSelectElement不會讓你直接設置value。可能有多個或零個<option> s具有特定的值，因此它不是一個簡單的1：1映射。

要選擇選項，您可以將其selected屬性設置爲true，或將select的selectedIndex屬性設置爲選項編號。

您的選擇中沒有option 3 - 您是否嘗試添加新選項？

例如

function setOrCreateSelectValue(select, value) { 
    for (var i= select.options.length; i-->0;) { 
     if (select.options[i].value==value) { 
      select.selectedIndex= i; 
      return; 
     } 
    } 
    select.options[select.options.length]= new Option(value, value, true, true); 
}

來源

2013-08-02 12:26:19 bobince

if (document.getElementById('txtTest').value===null) 
    { 
     document.getElementById('rdoSelect').value; 
    } 
    else 
    { 
     var val = document.getElementById('txtTest').value 
     for(var i, j = 0; i = rdoSelect.options[j]; j++) { 
     if(i.value == val) { 
      rdoSelect.selectedIndex = j; 
      break; 
     } 
    } 

}

來源

2013-08-02 12:33:58 zeenfaiz

看看這個的jsfiddle，它使用jQuery，這可能是最常見的解決方案。希望能幫助到你。

http://jsfiddle.net/GkLsZ/

$(function() { 
    $('#btnChange').on('click', function() { 
     var value = $.trim($('#txtTest').val()); 

     if (!!value) { 
      $('#rdoSelect') 
       .append($("<option></option>") 
       .attr("value", value) 
       .attr("selected", "selected") 
       .text(value)); 
     } 
    }); 
});

來源

2013-08-02 12:34:10 mitjak

更改使用JavaScript選擇標記值

回答

相關問題