การเปลี่ยนตัวเลือกที่เลือกขององค์ประกอบ HTML Select

ใน HTML ของฉันฉันมีองค์ประกอบ<select>สาม<option>อย่าง ฉันต้องการใช้ jQuery varการตรวจสอบค่าของแต่ละตัวเลือกกับจาวาสคริปต์ หากตรงกับที่ฉันต้องการตั้งค่าคุณสมบัติที่เลือกของตัวเลือกที่ ฉันจะทำอย่างไร

JavaScript วานิลลา

ใช้ JavaScript เก่าธรรมดา:

var val = "Fish";
var sel = document.getElementById('sel');
document.getElementById('btn').onclick = function() {
  var opts = sel.options;
  for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
  }
}

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

jQuery

แต่ถ้าคุณจริงๆต้องการใช้ jQuery:

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

jQuery - การใช้คุณสมบัติค่า

ในกรณีที่ตัวเลือกของคุณมีคุณสมบัติค่าที่แตกต่างจากเนื้อหาข้อความและคุณต้องการเลือกผ่านเนื้อหาข้อความ:

<select id="sel">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var val = 'Fish';
    $('#sel option:contains(' + val + ')').prop({selected: true});
</script>

การสาธิต

แต่ถ้าคุณมีการตั้งค่าข้างต้นและต้องการเลือกตามค่าโดยใช้ jQuery คุณสามารถทำได้เหมือนก่อน:

var val = 3;
$('#sel').val(val);

DOM สมัยใหม่

สำหรับเบราว์เซอร์ที่สนับสนุนdocument.querySelectorและHTMLOptionElement::selectedคุณสมบัตินี่เป็นวิธีที่ง่ายกว่าในการทำภารกิจนี้ให้สำเร็จ:

var val = 3;    
document.querySelector('#sel [value="' + val + '"]').selected = true;

การสาธิต

Knockout.js

<select data-bind="value: val">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var viewModel = {
        val: ko.observable()
    };
    ko.applyBindings(viewModel);
    viewModel.val(3);
</script>

การสาธิต

ลิเมอร์

<template id="template" is="dom-bind">
    <select value="{{ val }}">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</template>
<script>
    template.val = 3;
</script>

การสาธิต

เชิงมุม 2

หมายเหตุ: สิ่งนี้ไม่ได้รับการอัพเดตสำหรับรุ่นเสถียรสุดท้าย

<app id="app">
    <select [value]="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</app>
<script>
    var App = ng.Component({selector: 'app'})
        .View({template: app.innerHTML})
        .Class({constructor:  function() {}});

    ng.bootstrap(App).then(function(app) {
        app._hostComponent.instance.val = 3;
    });
</script>

การสาธิต

Vue 2

<div id="app">
    <select v-model="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
                val: null,
        },
        mounted: function() {
                this.val = 3;
        }
    });
</script>

การสาธิต

ไม่มีตัวอย่างใด ๆ ที่ใช้ jquery ในที่นี่ถูกต้องเพราะพวกเขาจะออกจากรายการที่แสดงรายการแรกแม้ว่าค่าจะเปลี่ยนไป

วิธีที่ถูกต้องในการเลือกอลาสก้าและเลือกให้แสดงรายการที่ถูกต้องตามที่เลือกโดยใช้:

<select id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

ด้วย jquery จะเป็น:

$('#state').val('AK').change();

คุณสามารถเปลี่ยนค่าขององค์ประกอบที่เลือกซึ่งจะเปลี่ยนตัวเลือกที่เลือกให้เป็นองค์ประกอบที่มีค่านั้นโดยใช้ JavaScript:

document.getElementById('sel').value = 'bike';​​​​​​​​​​

การสาธิต

มาร์กอัป

<select id="my_select">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

jQuery

var my_value = 2;
$('#my_select option').each(function(){
    var $this = $(this); // cache this jQuery object to avoid overhead

    if ($this.val() == my_value) { // if this option's value is equal to our value
        $this.prop('selected', true); // select this option
        return false; // break the loop, no need to look further
    }
});

การสาธิต

ฉันต้องการเปลี่ยนตัวเลือกที่เลือกขององค์ประกอบที่เลือกทั้งค่า & textContent (สิ่งที่เราเห็น) เป็น 'Mango'

รหัสที่ง่ายที่สุดที่ทำงานอยู่ด้านล่าง:

var newValue1 = 'Mango'

var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;

หวังว่าจะช่วยใครซักคน ขอให้โชคดี
โหวตถ้าสิ่งนี้ช่วยคุณได้

ทดสอบการสาธิตนี้

1. เลือกตัวเลือกตามมูลค่าของมัน

   var vals = [2,'c'];
   
   $('option').each(function(){
      var $t = $(this);
   
      for (var n=vals.length; n--; )
         if ($t.val() == vals[n]){
            $t.prop('selected', true);
            return;
         }
   });

2. เลือกตัวเลือกตามข้อความ

   var vals = ['Two','CCC'];                   // what we're looking for is different
   
   $('option').each(function(){
      var $t = $(this);
   
      for (var n=vals.length; n--; )
         if ($t.text() == vals[n]){            // method used is different
            $t.prop('selected', true);
            return;
         }
   });

รองรับ HTML

<select>
   <option value=""></option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

<select>
   <option value=""></option>
   <option value="a">AAA</option>
   <option value="b">BBB</option>
   <option value="c">CCC</option>
</select>

คำตอบที่ดีเลิศ - นี่คือรุ่น D3 สำหรับทุกคนที่กำลังดู:

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<script>
    d3.select('#sel').property('value', 'Fish');
</script>

ฉันใช้คำตอบเกือบทั้งหมดที่โพสต์ไว้ที่นี่ แต่ไม่พอใจกับสิ่งนั้นดังนั้นฉันจึงขุดหนึ่งขั้นตอนและพบทางออกที่ง่ายที่เหมาะกับความต้องการของฉันและรู้สึกคุ้มค่าที่จะแบ่งปันกับพวกคุณ
แทนที่จะทำซ้ำตัวเลือกทั้งหมดหรือใช้JQueryคุณสามารถใช้ core JSในขั้นตอนง่าย ๆ :

ตัวอย่าง

<select id="org_list">
  <option value="23">IBM</option>
  <option value="33">DELL</option>
  <option value="25">SONY</option>
  <option value="29">HP</option>
</select>

ดังนั้นคุณต้องรู้คุณค่าของตัวเลือกในการเลือก

function selectOrganization(id){
    org_list=document.getElementById('org_list');
    org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}

วิธีใช้?

selectOrganization(25); //this will select SONY from option List

ความคิดเห็นของคุณยินดีต้อนรับ :) AzmatHunzai

หลังจากการค้นหาจำนวนมากฉันลอง @kzh ในรายการที่เลือกซึ่งฉันรู้เฉพาะoptionข้อความด้านในไม่ใช่valueแอตทริบิวต์รหัสนี้ขึ้นอยู่กับคำตอบที่เลือกฉันใช้เพื่อเปลี่ยนตัวเลือกเลือกตามหน้าปัจจุบันของurlรูปแบบนี้ http://www.example.com/index.php?u=Steve

<select id="sel">
    <option>Joe</option>
    <option>Steve</option>
    <option>Jack</option>
</select>
<script>
    var val = window.location.href.split('u=')[1]; // to filter ?u= query 
    var sel = document.getElementById('sel');
    var opts = sel.options;
    for(var opt, j = 0; opt = opts[j]; j++) {
        // search are based on text inside option Attr
        if(opt.text == val) {
            sel.selectedIndex = j;
            break;
        }
    }
</script>

การดำเนินการนี้จะทำให้urlพารามิเตอร์ที่แสดงไว้ถูกเลือกไว้เพื่อให้ใช้งานได้ง่ายขึ้นและผู้เข้าชมจะรู้ว่าเขากำลังดูหน้าหรือโปรไฟล์ใดอยู่

ฉันใช้สิ่งนี้หลังจากอัพเดตรีจิสเตอร์และเปลี่ยนสถานะคำร้องขอผ่าน ajax จากนั้นฉันจะเคียวรีด้วยสถานะใหม่ในสคริปต์เดียวกันและวางลงในองค์ประกอบแท็กเลือกสถานะใหม่เพื่ออัพเดตมุมมอง

var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;

ฉันหวังว่านี่จะเป็นประโยชน์

neater รุ่นเล็กน้อย Vanilla.JS สมมติว่าคุณคงnodeListหายไปแล้ว.forEach():

NodeList.prototype.forEach = Array.prototype.forEach

แค่:

var requiredValue = 'i-50332a31',   
  selectBox = document.querySelector('select')

selectBox.childNodes.forEach(function(element, index){
  if ( element.value === requiredValue ) {
    selectBox.selectedIndex = index
  }
})