รับค่าที่เลือกในรายการแบบเลื่อนลงโดยใช้ JavaScript

ฉันจะรับค่าที่เลือกจากรายการแบบเลื่อนลงโดยใช้ JavaScript ได้อย่างไร

ฉันลองใช้วิธีการด้านล่าง แต่พวกเขาทั้งหมดกลับดัชนีที่เลือกแทนค่า:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

หากคุณมีองค์ประกอบที่เลือกซึ่งมีลักษณะดังนี้:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

ใช้รหัสนี้:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

จะทำให้เป็นstrUser 2ถ้าสิ่งที่คุณต้องการคือtest2ให้ทำดังนี้

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

ซึ่งจะทำให้strUserเป็นtest2

JavaScript ธรรมดา:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery:

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];

var strUser = e.options[e.selectedIndex].value;

สิ่งนี้ถูกต้องและควรให้คุณค่าแก่คุณ มันเป็นข้อความที่คุณหลังจาก?

var strUser = e.options[e.selectedIndex].text;

ดังนั้นคุณจึงชัดเจนเกี่ยวกับคำศัพท์:

<select>
    <option value="hello">Hello World</option>
</select>

ตัวเลือกนี้มี:

• ดัชนี = 0
• ค่า = สวัสดี
• ข้อความ = สวัสดีชาวโลก

รหัสต่อไปนี้แสดงตัวอย่างต่าง ๆ ที่เกี่ยวข้องกับการรับ / วางค่าจากฟิลด์อินพุต / เลือกโดยใช้ JavaScript

ลิงค์ที่มา

การใช้งานJavascript & jQuery Demo

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

สคริปต์ต่อไปนี้คือการรับค่าของตัวเลือกที่เลือกและวางไว้ในกล่องข้อความ 1

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

สคริปต์ต่อไปนี้ได้รับค่าจากกล่องข้อความ 2 และการแจ้งเตือนด้วยค่าของมัน

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

สคริปต์ต่อไปนี้กำลังเรียกใช้ฟังก์ชันจากฟังก์ชัน

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>

var selectedValue = document.getElementById("ddlViewBy").value;

หากคุณเคยเรียกใช้โค้ดที่เขียนอย่างหมดจดสำหรับ Internet Explorer คุณอาจเห็นสิ่งนี้:

var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;

การเรียกใช้ข้างต้นใน Firefox และ al จะทำให้คุณมีข้อผิดพลาด 'ไม่ใช่ฟังก์ชั่น' เนื่องจาก Internet Explorer อนุญาตให้คุณใช้ () แทน []:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

วิธีที่ถูกต้องคือใช้วงเล็บเหลี่ยม

<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

ฟิลด์อินพุต / ฟอร์มใด ๆ สามารถใช้คีย์เวิร์ด“ this” เมื่อคุณเข้าถึงจากภายในอิลิเมนต์ สิ่งนี้ช่วยลดความจำเป็นในการค้นหาฟอร์มในทรี dom จากนั้นค้นหาองค์ประกอบนี้ภายในฟอร์ม

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

ดังนั้นฉันจึงเพิ่มgetElementByName()โซลูชันเพื่อให้นักพัฒนาซอฟต์แวร์รายใหม่เห็นด้วย

NB ชื่อสำหรับองค์ประกอบของฟอร์มจะต้องไม่ซ้ำกันเพื่อให้ฟอร์มของคุณสามารถใช้งานได้เมื่อโพสต์แล้ว แต่ DOM สามารถอนุญาตให้ใช้ชื่อร่วมกันได้มากกว่าหนึ่งองค์ประกอบ ด้วยเหตุผลดังกล่าวให้พิจารณาการเพิ่มรหัสลงในแบบฟอร์มหากคุณสามารถหรือมีความชัดเจนกับชื่อองค์ประกอบของแบบฟอร์มmy_nth_select_named_xและmy_nth_text_input_named_yและ

ตัวอย่างการใช้getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

มีสองวิธีในการทำให้เสร็จโดยใช้ JavaScript หรือ jQuery

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

หรือ

var ddlViewBy = document.getElementById('ddlViewBy');

var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;

var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;

alert (value); // This will output the value selected

alert (text); // This will output the text of the value selected

jQuery:

$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

เพียงแค่ใช้

• $('#SelectBoxId option:selected').text(); สำหรับการรับข้อความตามที่ระบุไว้

• $('#SelectBoxId').val(); สำหรับการรับค่าดัชนีที่เลือก

คำตอบก่อนหน้านี้ยังคงออกจากห้องพักสำหรับการปรับปรุงเพราะเป็นไปได้ intuitiveness ของรหัสและการใช้งานของเมื่อเทียบกับid nameหนึ่งสามารถอ่านข้อมูลสามตัวเลือกที่เลือกไว้ได้ - หมายเลขดัชนีมูลค่าและข้อความ รหัสข้ามเบราว์เซอร์ที่เรียบง่ายนี้ทำทั้งสามอย่าง:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>

สาธิตสด: http://jsbin.com/jiwena/1/edit?html,output

idควรใช้เพื่อวัตถุประสงค์ในการแต่งหน้า สำหรับวัตถุประสงค์ในการใช้งานในรูปแบบnameยังคงใช้ได้ใน HTML5 และควรใช้ สุดท้ายให้คำนึงถึงการใช้วงเล็บเหลี่ยมกับทรงกลมในบางสถานที่ ดังที่อธิบายไว้ก่อนหน้านี้เท่านั้น (เวอร์ชั่นเก่ากว่า) Internet Explorer จะยอมรับการปัดเศษในทุกที่

ใช้ jQuery:

$('select').val();

ทางออกอื่นคือ:

document.getElementById('elementId').selectedOptions[0].value

ใช้ตัวอย่างของวิธีการทำงาน:

var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3"  selected="selected">test3</option>
</select>

หมายเหตุ: ค่าจะไม่เปลี่ยนแปลงเมื่อมีการเปลี่ยนแปลงแบบเลื่อนลงหากคุณต้องการฟังก์ชั่นการใช้งานนั้นจะต้องทำการเปลี่ยน onClick

querySelectorคุณสามารถใช้

เช่น

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

ฉันมีมุมมองที่แตกต่างกันเล็กน้อยเกี่ยวกับวิธีการบรรลุเป้าหมายนี้ ฉันมักจะทำเช่นนี้ด้วยวิธีการดังต่อไปนี้ (มันเป็นวิธีที่ง่ายขึ้นและทำงานได้กับทุกเบราว์เซอร์เท่าที่ฉันรู้):

<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>

ในปี 2015 ในFirefoxสิ่งต่อไปนี้ใช้งานได้

อี ตัวเลือก. selectIndex

เพื่อไปพร้อมกับคำตอบก่อนหน้านี้เป็นวิธีที่ฉันทำมันเป็นหนึ่งซับ นี่คือการรับข้อความจริงของตัวเลือกที่เลือก มีตัวอย่างที่ดีสำหรับการรับหมายเลขดัชนีอยู่แล้ว (และสำหรับข้อความฉันแค่ต้องการแสดงวิธีนี้)

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

ในบางกรณีที่ไม่ค่อยเกิดขึ้นคุณอาจจำเป็นต้องใช้วงเล็บ แต่มันจะหายากมาก

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

ฉันสงสัยว่ากระบวนการนี้เร็วกว่ารุ่นสองบรรทัดใด ๆ ฉันเพียงต้องการรวมรหัสของฉันให้มากที่สุด

น่าเสียดายที่สิ่งนี้ยังคงดึงองค์ประกอบสองครั้งซึ่งไม่เหมาะ วิธีการที่จะคว้าองค์ประกอบเพียงครั้งเดียวจะมีประโยชน์มากกว่า แต่ฉันยังไม่เข้าใจวิธีนี้ในการทำสิ่งนี้ด้วยโค้ดหนึ่งบรรทัด

นี่คือบรรทัดรหัส JavaScript:

var x = document.form1.list.value;

สมมติว่าเมนูแบบเลื่อนลงชื่อรายการและรวมอยู่ในรูปแบบที่มีคุณลักษณะชื่อname="list"name="form1"

คุณควรใช้querySelectorเพื่อให้บรรลุสิ่งนี้ นอกจากนี้ยังเป็นวิธีมาตรฐานในการรับค่าจากองค์ประกอบแบบฟอร์ม

var dropDownValue = document.querySelector('#ddlViewBy').value;

ซอ: https://jsfiddle.net/3t80pubr/

ฉันไม่รู้ว่าฉันเป็นคนที่ตอบคำถามไม่ถูกต้องหรือไม่ แต่นี่ใช้ได้สำหรับฉัน: การใช้เหตุการณ์ onchange () ใน html ของคุณเช่น

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

// จาวาสคริปต์

function sele(){
    var strUser = numberToSelect.value;
}

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

วิธีที่ง่ายที่สุดในการทำเช่นนี้คือ:

var value = document.getElementById("selectId").value;

นี่เป็นวิธีที่ง่ายที่จะทำในฟังก์ชั่น onchange:

event.target.options[event.target.selectedIndex].dataset.name

แค่ทำ: document.getElementById('idselect').options.selectedIndex

จากนั้นคุณจะได้รับค่าดัชนีเลือกเริ่มต้นที่ 0

ลอง

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

สร้างเมนูแบบเลื่อนลงที่มีตัวเลือกมากมาย (มากเท่าที่คุณต้องการ!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

ฉันทำเฮฮานิดหน่อย นี่คือข้อมูลโค้ด:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

ใช่ข้อมูลโค้ดทำงาน