如何使用JavaScript以編程方式設置選擇框元素的值？

我有如下HTML <select>元素：

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

使用以leaveCode數字做爲參數的JavaScript函數，如何在列表中選擇適當的選項？

---

#1樓

我比較了不一樣的方法：

比較如何使用JS或jQuery設置select值的方法

碼：

$(function() {
    var oldT = new Date().getTime();
     var element = document.getElementById('myId');
    element.value = 4;
    console.error(new Date().getTime() - oldT);


    oldT = new Date().getTime();
    $("#myId option").filter(function() {
        return $(this).attr('value') == 4;
    }).attr('selected', true);
    console.error(new Date().getTime() - oldT);


    oldT = new Date().getTime();
    $("#myId").val("4");
    console.error(new Date().getTime() - oldT);


});

帶有〜4000個元素的select的輸出：

1毫秒

58毫秒

612毫秒

使用Firefox10。注意：我進行此測試的惟一緣由是，因爲jQuery在咱們的列表上的表現很是差，有大約2000個條目（選項之間的文本較長）。 val（）以後大約有2秒的延遲

還要注意：我根據實際值而不是文本值來設置值

---

#2樓

若是使用PHP，則能夠嘗試如下操做：

$value = '11';
$first = '';
$second = '';
$third = '';
$fourth = '';

switch($value) {
            case '10' :
                $first = 'selected';
            break;
            case '11' :
                $second = 'selected';
            break;
            case '14' :
                $third = 'selected';
            break;
            case '17' :
                $fourth = 'selected';
            break;
        }

echo'
<select id="leaveCode" name="leaveCode">
  <option value="10" '. $first .'>Annual Leave</option>
  <option value="11" '. $second .'>Medical Leave</option>
  <option value="14" '. $third .'>Long Service</option>
  <option value="17" '. $fourth .'>Leave Without Pay</option>
</select>';

---

#3樓

我嘗試了上述基於JavaScript / jQuery的解決方案，例如：

$("#leaveCode").val("14");

和

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;

在AngularJS應用中，其中有必需的 <select>元素。

它們都不起做用，由於未觸發AngularJS表單驗證。 儘管選擇了正確的選項（並以表格形式顯示），但輸入仍然無效（仍然存在ng-pristine和ng-invalid類）。

要強制進行AngularJS驗證，請在選擇一個選項後調用jQuery change（） ：

$("#leaveCode").val("14").change();

和

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();

---

#4樓

您最可能但願這樣作：

$("._statusDDL").val('2');

要麼

$('select').prop('selectedIndex', 3);

---

#5樓

若是您使用的是jQuery，則還能夠執行如下操做：

$('#leaveCode').val('14');

這將選擇值爲14的<option> 。

---

使用純Javascript，這也能夠經過如下兩種Document方法來實現：

• 使用document.querySelector ，您能夠基於CSS選擇器選擇一個元素：

  document.querySelector('#leaveCode').value = '14'

• 使用更成熟的方法document.getElementById() ，正如函數名稱所暗示的那樣，讓您根據其id選擇一個元素：

  document.getElementById('leaveCode').value = '14'

您能夠運行下面的代碼片斷以查看這些方法和實際使用的jQuery函數：

const jQueryFunction = () => { $('#leaveCode').val('14'); } const querySelectorFunction = () => { document.querySelector('#leaveCode').value = '14' } const getElementByIdFunction = () => { document.getElementById('leaveCode').value='14' }

input { display:block; margin: 10px; padding: 10px }

<select id="leaveCode" name="leaveCode"> <option value="10">Annual Leave</option> <option value="11">Medical Leave</option> <option value="14">Long Service</option> <option value="17">Leave Without Pay</option> </select> <input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" /> <input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" /> <input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>