JavaScript kullanarak açılır listeden seçilen değeri alın

JavaScript kullanarak bir açılır listeden seçilen değeri nasıl alabilirim?

Aşağıdaki yöntemleri denedim, ancak hepsi değer yerine seçilen dizini döndürür:

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

Şöyle bir seçim öğeniz varsa:

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

Bu kodu çalıştırma:

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

Yapacak strUserolması 2. Aslında istediğiniz şeyse test2, bunu yapın:

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

Hangi yapacak strUserolmasıtest2

Açık 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

Açısal JS : ( 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;

Bu doğrudur ve size değer vermelidir. Arkanızdaki metin mi?

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

Yani terminolojiye açıksınız:

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

Bu seçenek şunları içerir:

• Dizin = 0
• Değer = merhaba
• Metin = Merhaba Dünya

Aşağıdaki kod, JavaScript kullanarak giriş / seçim alanlarından değer alma / yerleştirme ile ilgili çeşitli örnekler göstermektedir.

Kaynak Bağlantı

Javascript ve jQuery Demo Çalışması

 <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()">

Aşağıdaki komut dosyası seçilen seçeneğin değerini alıyor ve metin kutusuna koyuyor 1

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

Aşağıdaki komut dosyası, bir metin kutusu 2'den bir değer alıyor ve değeriyle uyarıyor

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

Aşağıdaki komut dosyası bir işlevden işlev çağırıyor

<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;

Yalnızca Internet Explorer için yazılmış bir kodla karşılaşırsanız şunu görebilirsiniz:

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

Yukarıdakileri Firefox ve diğerlerinde çalıştırmak size bir 'işlev değildir' hatası verir, çünkü Internet Explorer [] yerine () kullanarak kurtulmanıza izin verir:

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

Doğru yol köşeli parantez kullanmaktır.

<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>

Herhangi bir giriş / form alanı, öğenin içinden eriştiğinizde "bu" bir anahtar kelime kullanabilir. Bu, dom ağacında bir form bulma ve ardından bu öğeyi formun içinde bulma ihtiyacını ortadan kaldırır.

Yeni başlayanlar, ID özelliği yerine NAME özelliğine sahip bir seçimdeki değerlere erişmek isteyebilir. Tüm form öğelerinin, kimlik almadan önce bile adlara ihtiyacı olduğunu biliyoruz.

Bu yüzden, getElementByName() çözümü sadece yeni geliştiricilerin görmesi için .

NB. form öğelerinin adlarının, formunuz gönderildikten sonra kullanılabilir olması için benzersiz olması gerekir, ancak DOM, bir adın birden fazla öğe tarafından paylaşılmasına izin verebilir. Bu nedenle, mümkünse formlara kimlik eklemeyi düşünün veya form öğesi adları my_nth_select_named_xve ile açık olun my_nth_text_input_named_y.

Kullanarak örnek getElementByName:

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

JavaScript veya jQuery kullanarak bunu yapmanın iki yolu vardır.

JavaScript:

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

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

VEYA

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'

Sadece kullan

• $('#SelectBoxId option:selected').text(); listelendiği gibi metni almak için

• $('#SelectBoxId').val(); seçilen indeks değerini almak için

Önceki cevaplar olasılıklar, kodun sezgiselliği ve idkarşısındakinin kullanımı nedeniyle hala gelişmeye açıktır name. Seçilen bir seçeneğin üç verisinin okunması elde edilebilir - dizin numarası, değeri ve metni. Bu basit, çapraz tarayıcı kodu üçünü de yapar:

<!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>

Canlı demo: http://jsbin.com/jiwena/1/edit?html,output .

idmakyaj amaçlı kullanılmalıdır. Fonksiyonel form amaçları nameiçin HTML5'te de geçerlidir ve hala kullanılmalıdır. Son olarak, bazı yerlerde kare veya yuvarlak parantez kullanılmasına dikkat edin. Daha önce açıklandığı gibi, sadece (eski sürümleri) Internet Explorer her yerde yuvarlak olanları kabul edecektir.

JQuery kullanma:

$('select').val();

Başka bir çözüm:

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

Nasıl çalıştığına dair örnek:

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>

Not: Açılırlık değiştikçe değerler değişmez, bu işlevselliğe ihtiyacınız varsa bir onClick değişikliği uygulanacaktır.

Kullanabilirsiniz querySelector.

Örneğin

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

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

Bunu nasıl başaracağım konusunda biraz farklı bir görüşüm var. Bunu genellikle aşağıdaki yaklaşımla yapıyorum (daha kolay bir yol ve bildiğim kadarıyla her tarayıcıda çalışıyor):

<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 yılında Firefox'ta aşağıdakiler de işe yarıyor.

e. seçenekler .selectedIndex

Önceki cevaplarla birlikte gitmek için, bunu tek katmanlı olarak yapıyorum. Bu, seçilen seçeneğin gerçek metnini almak içindir. Endeks numarasını almak için iyi örnekler var. (Ve metin için, sadece bu şekilde göstermek istedim)

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

Bazı nadir durumlarda parantez kullanmanız gerekebilir, ancak bu çok nadir olur.

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

Bunun iki satırlı sürümden daha hızlı işlediğinden şüpheliyim. Kodumu olabildiğince birleştirmeyi seviyorum.

Ne yazık ki bu hala elemanı iki kez getiriyor, bu ideal değil. Sadece bir kez eleman kapmak bir yöntem daha yararlı olacaktır, ama ben bunu henüz bir kod satırı ile yapmak açısından henüz çözemedim.

İşte bir JavaScript kod satırı:

var x = document.form1.list.value;

Açılır menünün listeyi adlandırdığı name="list"ve name özniteliğine sahip bir forma dahil edildiği varsayılarak name="form1".

Bunu querySelectorbaşarmak için kullanıyor olmalısınız . Bu aynı zamanda form öğelerinden değer alma yolunu da standartlaştırır.

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

Keman: https://jsfiddle.net/3t80pubr/

Soruyu doğru anlamayan tek kişi olup olmadığımı bilmiyorum, ama bu sadece benim için çalıştı: html'nizde bir onchange () olayı kullanma, örn.

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

// javascript

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

Bu, tıklama başına seçim açılır menüsünde herhangi bir değeri verir

Bunu yapmanın en basit yolu:

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

İşte bir değişim işlevinde yapmanın kolay bir yolu:

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

Sadece yap: document.getElementById('idselect').options.selectedIndex

Sonra 0 ile başlayan endeks değerini seçeceğim.

Deneyin

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>

Birkaç seçenek içeren bir açılır menü yapın (İstediğiniz kadar!)

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

Biraz komik yaptım. Kod pasajı şöyledir:

<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>  

pasajı çalıştı