jQuery ড্রপডাউন থেকে নির্বাচিত বিকল্প পান

1126

সাধারণত আমি $("#id").val()নির্বাচিত বিকল্পটির মান ফেরত দিতে ব্যবহার করি তবে এবার এটি কার্যকর হয় না। নির্বাচিত ট্যাগটির আইডি রয়েছেaioConceptName

এইচটিএমএল কোড

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>
javascript  jquery  html 
— উইলিয়াম কিনান
সূত্র
2
আপনি উপাদান মার্কআপ দেখাতে পারে#aioConceptName
— হোর্হে
2
এটি আশ্চর্যজনক কারণ jsfiddle.net/pAtVP এই উদাহরণে কাজ করে , আপনি কি নিশ্চিত যে ইভেন্টটি আপনার প্রতিবেশে আগুন লেগেছে?
— হোর্হে
5
— কেনি লিনস্কি
11
একটি দেরী চিন্তা, কিন্তু। ওভাল () কাজ করবে না আপনি যদি না s এর valueউপর অ্যাট্রিবিউট সেট করে থাকেন <option>, তাই না?
— জ্যাকব ভ্যালেন্টা
8
JQuery এর সাম্প্রতিক সংস্করণগুলিতে (1.9.1 দিয়ে পরীক্ষিত) এই মার্কআপটিতে কোনও সমস্যা নেই। উপরের উদাহরণের জন্য, $("#aioConceptName").val()রিটার্ন choose io।
— সালমান এ

উত্তর:

1844

ড্রপডাউন বিকল্পগুলির জন্য আপনি সম্ভবত এর মতো কিছু চান:

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

কারণ val()কৌতুক না কারণ একটি বিকল্প ক্লিক ড্রপডাউন মান পরিবর্তন করে না - এটা শুধু যোগ :selectedনির্বাচিত বিকল্পটি যা হয় সম্পত্তি শিশু ড্রপডাউন করুন।

— এলিয়ট বোনেভিল
সূত্র
41
আহ, ঠিক আছে, আপনি আপনার প্রশ্নটি এইচটিএমএল দিয়ে আপডেট করেছেন। এই উত্তরটি এখন অপ্রাসঙ্গিক। প্রকৃতপক্ষে, .val()আপনার ক্ষেত্রে কাজ করা উচিত - আপনার অন্য কোনও জায়গায় ত্রুটি থাকতে হবে।
— এলিয়ট বোনেভিল
13
জন্য val()ব্যবহার কেন নয় var conceptVal = $("#aioConceptName option").filter(":selected").val();?
— পরীক্ষক 21
61
কীভাবে সহজ var conceptVal = $("#aioConceptName option:selected").val()?
— Klemen Tušar
5
আমি আগে যেখানে ড্রপডাউনটি পেয়েছি এমন একটি নির্বাচনের ক্ষেত্রে নির্বাচিত বিকল্পটি সন্ধানের জন্য আমি এই সহায়কটি খুঁজে পেয়েছি - যেমন, var mySelect = $('#mySelect'); / * ... আরও কোড ঘটে ... * / var selectedText = mySelect.find(':selected').text();
— চার্লস উড
18
প্রকৃত কারণ। ওভেল () তার পক্ষে কাজ করছে না কারণ তিনি তার বিকল্পগুলি আসলে একটি মূল্য দেন নি, এজন্য তাকে নির্বাচিত পাঠ্য পুনরুদ্ধার করতে আপনার পদ্ধতিটি ব্যবহার করতে হবে, তাই অন্য একটি সমাধানও বদলাতে হবে <বিকল্প> আইও বেছে নিন </ translation> <বিকল্প মান = 'বেছে নিন আইও'> আইও চয়ন করুন </option> যদিও আপনার সমাধান সম্ভবত দ্রুত এবং আরও কার্যকর, তবে আমি বুঝতে পেরেছি যে যাই হোক না কেন এটি সম্পর্কে আরও ভাল ধারণা রয়েছে কেন এটি তার পক্ষে কাজ করছিল না।
— জর্দান লাপ্রিস
342

প্রতিটি বিকল্পের জন্য মান নির্ধারণ করুন

<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ভুডু অন্যদের পরামর্শের পরিবর্তে কল করতে পারেন ।

— জ্যাকব ভ্যালেন্টা
সূত্র
11
ক্যাভেট: যদি কোনও বিকল্প বাছাই না করা হয় তবে $('#aioConceptName').val()নাল / "অপরিজ্ঞাত" ফিরিয়ে দেয়
— গর্ডন
এটি আমাকে আশ্বস্ত করেছে যে $ ('# মাইলেক্ট')। ভাল () সঠিক ছিল আমি নির্বাচিতটিকে একটি আইডি দিতে কেবল নির্লজ্জভাবে ভুলে গেছি!
— জাজেপার
4
আমার অপশন নির্বাচন করুন একজন বিশেষ promptবিকল্প <option>Please select an option</option>। আমার ক্ষেত্রে একটি ফাঁকা মান বৈশিষ্ট্য যুক্ত করা কোনও সমস্যা ছিল না <option value="">Please...</option>তবে আমি বিশ্বাস করি যে কয়েকটি ক্ষেত্রে মান বৈশিষ্ট্য না থাকা অর্থপূর্ণ। তবে +1 কারণ আপনার ভোডো শব্দটি আমাকে হাসিয়ে দিয়েছে।
— সিরিল ডুচন-ডরিস
এর ভিতরে লেখাটির পরিবর্তে val()নির্বাচন করা হয় valueনা option? অর্থাৎ এটি 1পরিবর্তে নির্বাচন করে roma।
— ডেথলক
4
@ ডেথলক এটি সম্পূর্ণ বিষয় .val()। আপনি যদি পাঠ্যটি পরিচালনা / ব্যবহার করতে চান $(":selected).text()তবে মান এবং পাঠ্যটিকে একই হিসাবে ব্যবহার করুন বা সেট করুন।
— জ্যাকব ভ্যালেন্টা
161

আমি এই প্রশ্নটি দেখে হোঁচট খেয়েছি এবং এলিয়ট বোনেভিলির উত্তরের আরও সংক্ষিপ্ত সংস্করণটি বিকাশ করেছি:

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

বা উদারভাবে:

$('#id :pseudoclass')

এটি আপনাকে একটি অতিরিক্ত jQuery কল সংরক্ষণ করে, একটি শটে সমস্ত কিছু নির্বাচন করে এবং আরও স্পষ্ট করে (আমার অভিমত)।

— এড ওরসি
সূত্র
1
@ জোহানকন্ডে মেটা সম্পর্কিত গৃহীত উত্তরটি আপনার সাথে একমত নয়: meta.stackexchange.com/questions/87678/… । আমার মতে, এড একটি ভাল উত্তর দিয়েছেন এবং কেবল কিছু অতিরিক্ত রেফারেন্স দিয়েছেন।
— ব্রুস
তারা এটি অনুমতি দিতে পারে তবে এটি এখনও একটি খারাপ সংস্থান
— জন কনডে
1
W3schools লিঙ্কটি সরানো হয়েছে, এটি কঠোরভাবে প্রয়োজনীয় ছিল না এবং "jQuery pseduo ক্লাস" এর জন্য একটি গুগল অনুসন্ধান প্রচুর তথ্য সরবরাহ করে।
— এড ওরসি
@ এডোর্সি: এটি অতিরিক্ত জিকুয়েরি কলটি সাশ্রয় করার সময়, এটি নেটিভ ডিওএম querySelectorAll()পদ্ধতি দ্বারা সরবরাহিত পারফরম্যান্স বৃদ্ধির সুযোগ নিতে বাধা দেয় ( jQuery ডক্স দেখুন )। সুতরাং, এটি এলিয়টের সমাধানের চেয়ে ধীর হওয়া উচিত ।
— আলেকজান্ডার আবাকুমভ
আমি সম্ভবত .find(':selected')তখন এটির পক্ষে চাইলে এটি আপনাকে কোনও ইভেন্টের সাথে যুক্ত কলব্যাক থেকে কল করতে দেয় ... যেমন$('#aioConceptname').bind('change', function(el) { console.log ( $(el).find(':selected').text() ); });
— আর্মস্ট্রোনজেস্ট
58

এটির জন্য চেষ্টা করুন ...

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

বা এটি পাঠ্যের জন্য ...

$("select#id_of_select_element option").filter(":selected").text();
— ভ্লাদিমির জজুরিক
সূত্র
49

আপনি যদি 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
});

সম্পাদন করা

যেমন প্যাসেসবিথিন উল্লেখ করেছেন , আমার উত্তরটি কেবলমাত্র প্রশ্নের উত্তর দেয়: নির্বাচিত "বিকল্প" কীভাবে নির্বাচন করবেন।

এর পরে, বিকল্পের মানটি পেতে, ব্যবহার করুন option.val()।

— JoDev
সূত্র
2
ফ্ললেস! কেবল ভুলে যাবেন না $(this).find('option:selected').val()বিকল্প বিকল্পটির মান $(this).find('option:selected').text()পেতে বা পাঠ্যটি পেতে আপনার শেষে যুক্ত করা উচিত । :)
— ডিয়েগো
16

একটি নির্বাচনের মান (পাঠ্য নয়) পড়া:

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

কিভাবে একটি নির্বাচন নিষ্ক্রিয় করবেন? উভয় ভেরিয়েন্টে, মানটি ব্যবহার করে এটি পরিবর্তন করা যেতে পারে:

একজন

ব্যবহারকারী ড্রপডাউনটির সাথে ইন্টারঅ্যাক্ট করতে পারবেন না। এবং অন্যান্য বিকল্পের উপস্থিতি থাকতে পারে তা তিনি জানেন না।

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

বি

ব্যবহারকারীরা ড্রপডাউনে বিকল্পগুলি দেখতে পাবে তবে সেগুলি সমস্ত অক্ষম রয়েছে:

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

এই ক্ষেত্রে, $("#Status").val() কেবল jQuery সংস্করণগুলির চেয়ে ছোট সংস্করণগুলিতে কাজ করবে1.9.0 । অন্য সমস্ত রূপগুলি কাজ করবে।

একটি অক্ষম নির্বাচন কিভাবে আপডেট করবেন?

পিছনের কোড থেকে আপনি এখনও আপনার নির্বাচনের মান আপডেট করতে পারেন। এটি কেবল ব্যবহারকারীদের জন্য অক্ষম করা হয়েছে:

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

কিছু ক্ষেত্রে আপনার প্রয়োজন হতে পারে ঘটনা গুলি চালানোর:

$("#Status").val(2).change();
— profimedica
সূত্র
11 
<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>
— ওল সেন
সূত্র
:) সুন্দর জিনিসটি হল :selected.. ভাল () বা পাঠ্য () একাধিক নির্বাচনের বিকল্পগুলিতে সঠিকভাবে কাজ করছে না, কেবল তখনই যদি কিছু অ্যারে তৈরি হয় তবে এটি map()করতে পারে।
— ওল সেন
10

আপনার এই বাক্য গঠনটি ব্যবহার করা উচিত:

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

সুতরাং এই কোড চেষ্টা করুন:

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

আপনি ফিডল পরীক্ষা করতে পারেন: http://jsfiddle.net/PJT6r/9/

এই পোস্টে এই উত্তর সম্পর্কে দেখুন

— DLMAN
সূত্র
9

JQuery ব্যবহার করে, কেবল একটি changeইভেন্ট যুক্ত করুন এবং সেই হ্যান্ডলারের মধ্যে নির্বাচিত মান বা পাঠ্য পান।

আপনার যদি নির্বাচিত পাঠ্যের প্রয়োজন হয় তবে দয়া করে এই কোডটি ব্যবহার করুন:

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

বা আপনার যদি নির্বাচিত মানের প্রয়োজন হয় তবে দয়া করে এই কোডটি ব্যবহার করুন:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});
— sanman
সূত্র
9

ব্যবহার করুন jQuery.val(), খুব নির্বাচন উপাদানের জন্য ফাংশন:

.Val () পদ্ধতিটি প্রাথমিকভাবে ইনপুট, নির্বাচন এবং টেক্সারিয়া জাতীয় ফর্মের মানগুলি পেতে ব্যবহৃত হয়। নির্বাচিত উপাদানগুলির ক্ষেত্রে, 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>
স্নিপেট প্রসারিত করুন

— সালমান আ
সূত্র
8

যে সর্বোত্তম উত্তরটি খুঁজে পেয়েছেন তার পক্ষে কাজ করবেন না।

ব্যবহার করার চেষ্টা করুন:

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

সাম্প্রতিক প্রকল্পগুলিতে আমার জন্য কাজ করে তাই এটি দেখার পক্ষে এটি উপযুক্ত।

— user2709153
সূত্র
7

শুধু এটি কাজ করা উচিত:

var conceptName = $('#aioConceptName').val();
— d.popov
সূত্র
6

সোজা এগিয়ে এবং বেশ সহজ:

আপনার ড্রপডাউন

<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.
});
— হুয়ান জে
সূত্র
4

আপনি এটি এভাবে ডিবাগ করার চেষ্টা করতে পারেন:

console.log($('#aioConceptName option:selected').val())
— swathi
সূত্র
4

নির্বাচিত ট্যাগের মান পাওয়ার জন্য : 

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

এবং আপনি যদি এই কোডটি ব্যবহার করে পাঠ্য পেতে চান :

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

উদাহরণ স্বরূপ:

<div id="i_am_parent_of_select_tag">
<select>
        <option value="1">CR7</option>
        <option value="2">MESSI</option>
</select>
</div>


<script>
 $('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
 $('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>
— mamal
সূত্র
2

আপনি যদি পাঠ্য নোডের পরিবর্তে 'মান' বৈশিষ্ট্যটি দখল করতে চান তবে এটি আপনার পক্ষে কাজ করবে:

var conceptName = $('#aioConceptName').find(":selected").attr('value');
— Drodarious
সূত্র
এটি কেবলমাত্র আংশিক সমাধান - প্রতিটি বিকল্পের জন্য মান নির্ধারণ করাও প্রয়োজনীয় - এটি ইতিমধ্যে জ্যাকব ভ্যালেটার উত্তর দ্বারা আবৃত
— ডেভিড
2

এই এক চেষ্টা

$(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 
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);

সূচকের সাহায্যে ডিডিএলকে একটি অ্যারে হিসাবে কল্পনা করুন, আপনি একটি সূচক নির্বাচন করছেন। আপনি আপনার জেএস দিয়ে এটি সেট করতে চান তা চয়ন করুন।

— Satista
সূত্র
2

আমি আশা করি এটি আরও ভালভাবে বুঝতে সহায়তা করে এবং নীচে এটি চেষ্টা করতে সহায়তা করে,

$('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/

— Vijayaragavan
সূত্র
1

নির্বাচিত বিকল্পটি নির্বাচন করা হয়েছে কিনা তা পরীক্ষা করতে একই শ্রেণি = নামের সাথে একটি নির্বাচন আপনি আনতে পারেন।

var bOK = true;
$('.optKategorien').each(function(index,el){
    if($(el).find(":selected").text() == "") {
        bOK = false;
    }
});
— ব্লুদাউ মিডিয়া
সূত্র
1

আমার একই সমস্যা ছিল এবং আমি বুঝতে পেরেছিলাম কেন এটি আমার মামলায় কাজ করছে না
এইচটিএমএল পৃষ্ঠাটি বিভিন্ন এইচটিএমএল খণ্ডে বিভক্ত ছিল এবং আমি দেখতে পেলাম যে আমার অন্য একটি ইনপুট ফিল্ড রয়েছে যা একই আইডি বহন করে select, যা val()সর্বদা খালি থাকায়
আমি আশা করি যে একই ধরণের সমস্যা আছে তার জন্য এটি দিনটি বাঁচায়।

— হাসনা ইব্রাহিম
সূত্র
প্রকৃতপক্ষে, এটি আমার সমস্যায় জেগেছিল। আমি নিজেই ডেটা-টার্গেটে কিটি-ফিল্ড এবং আইডিতে নিজেই কিউটি ফিল্ড ব্যবহার করছিলাম। সবসময় বেসিক দুটি বা তার বেশি পরীক্ষা করে দেখুন।
— সিডিসেনজ
1

$ ("# আইডি") ব্যবহার করতে val ভাল, আপনার পছন্দ মতো বিকল্পটিতে একটি মান যুক্ত করা উচিত:

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

অন্যথায়, আপনি ব্যবহার করতে পারেন 

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

আমি আশা করি যে সাহায্য করে ..

— ইউসুফ আজান
সূত্র
1

এই সমস্যাটির সহজ সমাধান এখানে। 

$("select#aioConceptName").change(function () {
           var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
           console.log(selectedaioConceptName);
        });
— সঞ্জয়া
সূত্র
1
var selectedaioConceptName = $('#aioConceptName option:selected').val();আরেকটি সন্ধান () ব্যবহারের চেয়ে ভাল
— সাদী
0

সম্ভবত এই ধরণের দৃশ্যের সাথে আপনার সেরা বেটটি হল বর্তমানে নির্বাচিত মানটি খুঁজে পেতে jQuery এর পরিবর্তন পদ্ধতিটি ব্যবহার করা :

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

আমি এই পদ্ধতিটি পছন্দ করি কারণ আপনি প্রদত্ত নির্বাচিত ক্ষেত্রে প্রতিটি নির্বাচিত বিকল্পের জন্য ফাংশন সম্পাদন করতে পারেন।

আশা করি এইটি কাজ করবে!

— ওয়ার্নার জেবার্ড বেসিঞ্জার
সূত্র
0

সাধারণত আপনাকে কেবলমাত্র নির্বাচিত মানটিই পেতে হবে না, তবে কিছু ক্রিয়া চালাতে হবে। তাহলে কেন সমস্ত jQuery যাদুটি এড়িয়ে চলুন এবং নির্বাচিত মানটি অ্যাকশন কলের আর্গুমেন্ট হিসাবে পাস করবেন না?

<select onchange="your_action(this.value)">
   <option value='*'>All</option>
   <option ... />
</select>
— রোল্যান্ড
সূত্র
0

আপনি সঠিক নির্বাচিত বিকল্পটি ব্যবহার করে নির্বাচন করতে পারেন: নীচে ইনারটেক্সট দেবে

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

নীচে আপনি মান দিতে হবে। 

$("select#aioConceptName > option:selected").val()
— হাফিজ শেহবাজ আলী
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.