it-swarm.asia

احصل على خيار محدد من القائمة المنسدلة

عادةً ما أستخدم $("#id").val() لإرجاع قيمة الخيار المحدد ، لكن هذه المرة لا تعمل. العلامة المحددة لها معرف aioConceptName

كود html

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>
1011
William Kinaan

بالنسبة للخيارات المنسدلة ، ربما تريد شيئًا كهذا:

var conceptName = $('#aioConceptName').find(":selected").text();

سبب val() لا يقوم بالخدعة هو أن النقر فوق أحد الخيارات لا يغير قيمة القائمة المنسدلة - إنه يضيف فقط خاصية :selected إلى الخيار المحدد وهو تابع من القائمة المنسدلة.

1681
Elliot Bonneville

قم بتعيين القيم لكل خيار من الخيارات

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val() لم تنجح لأن .val() ترجع سمة value. لجعله يعمل بشكل صحيح ، يجب تعيين السمات value على كل <option>.

يمكنك الآن الاتصال بـ $('#aioConceptName').val() بدلاً من كل هذا :selected الفودو الذي اقترحه الآخرون.

310
Jacob Valenta

عثرت على هذا السؤال وقمت بتطوير نسخة أكثر إيجازًا من إجابة Elliot BOnneville:

var conceptName = $('#aioConceptName :selected').text();

أو بشكل عام:

$('#id :pseudoclass')

هذا يوفر عليك مكالمة jQuery إضافية ، ويحدد كل شيء في طلقة واحدة ، وأكثر وضوحا (رأيي).

153
Ed Orsi

جرب هذا لقيمة ...

$("select#id_of_select_element option").filter(":selected").val();

أو هذا للنص ...

$("select#id_of_select_element option").filter(":selected").text();
53
Vladimir Djuricic

إذا كنت في سياق الحدث ، في jQuery ، فيمكنك استرداد عنصر الخيار المحدد باستخدام:
$(this).find('option:selected') مثل هذا:

$('dropdown_selector').change(function() {
    //Use $option (with the "$") to see that the variable is a jQuery object
    var $option = $(this).find('option:selected');
    //Added with the EDIT
    var value = $option.val();//to get content of "value" attrib
    var text = $option.text();//to get <option>Text</option> content
});

تحرير

كما ذكر PossessWithin ، جوابي فقط الإجابة على السؤال: كيفية تحديد "الخيار" المحدد.

بعد ذلك ، للحصول على قيمة الخيار ، استخدم option.val().

46
JoDev

هل فكرت في استخدام جافا سكريبت القديم البسيط؟

var box = document.getElementById('aioConceptName');

conceptName = box.options[box.selectedIndex].text;

راجع أيضًا الحصول على نص خيار/قيمة مع JavaScript

29
Roonaan
$('#aioConceptName option:selected').val();
17
wild_nothing

قراءة القيمة (وليس النص) لتحديد:

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

كيفية تعطيل اختيار؟ في كلا الخيارين ، يمكن تغيير القيمة باستخدام:

A

لا يمكن للمستخدم التفاعل مع القائمة المنسدلة. وهو لا يعرف الخيارات الأخرى التي قد توجد.

$('#Status').prop('disabled', true);

B

يمكن للمستخدم رؤية الخيارات في القائمة المنسدلة ولكن تم تعطيلها جميعًا:

$('#Status option').attr('disabled', true);

في هذه الحالة ، ستعمل $("#Status").val() فقط لإصدارات jQuery الأصغر من 1.9.0. جميع المتغيرات الأخرى ستعمل.

كيفية تحديث اختيار المعوقين؟

من التعليمات البرمجية خلف يمكنك الاستمرار في تحديث القيمة في تحديد الخاص بك. تم تعطيله فقط للمستخدمين:

$("#Status").val(2);

في بعض الحالات ، قد تحتاج إلى إطلاق الأحداث:

$("#Status").val(2).change();
11
profimedica
<select id="form-s" multiple="multiple">
    <option selected>city1</option>
    <option selected value="c2">city2</option>
    <option value="c3">city3</option>
</select>   
<select id="aioConceptName">
    <option value="s1" selected >choose io</option>
    <option value="s2">roma </option>
    <option value="s3">totti</option>
</select>
<select id="test">
    <option value="s4">paloma</option>
    <option value="s5" selected >foo</option>
    <option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
    var a=$(':selected').text(); // "city1city2choose iofoo"
    var b=$(':selected').val();  // "city1" - selects just first query !
    //but..
    var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
        return $(this).text();
    }); 
    var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
        return $(this).val();
    });
    console.log(a,b,c,d);
});
</script>
11
Ol Sen

استخدم jQuery.val() الدالة لعناصر تحديد ، أيضًا:

يتم استخدام طريقة .val () بشكل أساسي للحصول على قيم عناصر النموذج مثل الإدخال ، التحديد و textarea. في حالة عناصر التحديد ، تقوم بإرجاع null عند عدم تحديد أي خيار وصفيف يحتوي على قيمة كل خيار محدد عندما يكون هناك خيار واحد على الأقل ويمكن تحديد أكثر لأن سمة multiple موجودة.

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>
9
Salman A

يجب عليك استخدام بناء الجملة هذا:

var value = $('#Id :selected').val();

لذا جرب هذا الكود:

var values = $('#aioConceptName :selected').val();

يمكنك اختبار في Fiddle: http://jsfiddle.net/PJT6r/9/

انظر حول هذه الإجابة في هذا المنصب

9
D.L.MAN

باستخدام jQuery ، فقط أضف حدث change واحصل على قيمة أو نص محدد داخل هذا المعالج.

إذا كنت بحاجة إلى نص محدد ، يرجى استخدام هذا الرمز:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

أو إذا كنت بحاجة إلى قيمة محددة ، فيرجى استخدام هذا الرمز:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});
9
sanman

لكل من اكتشف أن أفضل إجابة لا يعمل.

حاول استخدام:

  $( "#aioConceptName option:selected" ).attr("value");

يعمل لي في المشاريع الحديثة لذلك يجدر النظر فيه.

8
user2709153

فقط هذا يجب أن تعمل:

var conceptName = $('#aioConceptName').val();
6
d.popov

يمكنك محاولة تصحيحها بهذه الطريقة:

console.log($('#aioConceptName option:selected').val())
3
swathi

آمل أن يساعد هذا أيضًا في فهم أفضل ويساعد في تجربة ذلك أدناه ، $('select[id="aioConceptName[]"] option:selected').each(function(key,value){ options2[$(this).val()] = $(this).text(); console.log(JSON.stringify(options2)); });
لمزيد من التفاصيل يرجى http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/

2
Vijayaragavan

محاولة لهذا واحد

$(document).ready(function() {

    $("#name option").filter(function() {
        return $(this).val() == $("#firstname").val();
    }).attr('selected', true);

    $("#name").live("change", function() {

        $("#firstname").val($(this).find("option:selected").attr("value"));
    });
});


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name"> 
<option value="">Please select...</option> 
<option value="Elvis">Elvis</option> 
<option value="Frank">Frank</option> 
<option value="Jim">Jim</option> 
</select>

<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">
2
Haris Sultan

على التوالي إلى الأمام وسهلة جدا:

القائمة المنسدلة الخاصة بك

<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

كود Jquery للحصول على القيمة المحددة

$('#aioConceptName').change(function() {
    var $option = $(this).find('option:selected');

    //Added with the EDIT
    var value = $option.val(); //returns the value of the selected option.
    var text = $option.text(); //returns the text of the selected option.
});
2
Juan J

إذا كنت ترغب في الحصول على السمة "value" بدلاً من العقدة النصية ، فسيكون ذلك مناسبًا لك:

var conceptName = $('#aioConceptName').find(":selected").attr('value');
2
Drodarious

عادة ما لا تحتاج فقط إلى الحصول على القيمة المحددة ، ولكن أيضًا تنفيذ بعض الإجراءات. فلماذا لا تتجنب كل سحر jQuery وتمرير القيمة المحددة كوسيطة لدعوة الإجراء؟

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>
0
Roland

يمكنك استخدام $("#drpList").val();

0
Author PraWin

يمكنك تحديد استخدام الخيار المحدد بالضبط: أدناه سوف تعطي innerText

$("select#aioConceptName > option:selected").text()

بينما أدناه سوف تعطيك قيمة.

$("select#aioConceptName > option:selected").val()
0
Hafiz Shehbaz Ali
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

تخيل DDL كصفيف به فهارس ، فأنت تختار فهرسًا واحدًا. اختيار واحد الذي تريد ضبطه على مع JS الخاص بك.

0
Satista

للحصول على قيمة من العلامة المحددة:

 $('#id_Of_Parent_Selected_Tag').find(":selected").val();

وإذا كنت ترغب في الحصول على نص استخدم هذا الرمز:

 $('#id_Of_Parent_Selected_Tag').find(":selected").text();

على سبيل المثال => لدي هذه العلامة المحددة:

<div id="id_Of_Parent_Selected_Tag">
<select >
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
    </select>
</div>
<script>
 $('#id_Of_Parent_Selected_Tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#id_Of_Parent_Selected_Tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>
0
mamal

كان لدي نفس المشكلة ووجدت لماذا لم تكن تعمل على حالتي
تم تقسيم صفحة html إلى أجزاء html مختلفة ووجدت أن لدي حقل إدخال آخر يحمل نفس معرف select ، مما تسبب في أن val() فارغ دائمًا
آمل أن يوفر هذا اليوم لأي شخص لديه مشكلة مماثلة.

0
Hasnaa Ibraheem

لإحضار تحديد بنفس الفئة = اسم يمكنك القيام بذلك ، للتحقق مما إذا كان خيار تحديد محددًا أم لا.

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});
0
thE_iNviNciblE

لاستخدام $ ("# id"). val ، يجب عليك إضافة قيمة إلى الخيار مثل هذا:

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option value="choose">choose io</option>
</select>

آخر ، يمكنك استخدام

   $("#aioConceptName").find(':selected').text();

اتمنى ان يساعد ..

0
Yusuf Azan