jQuery सेट चयन सूचकांक

Question

मेरे पास एक चयन बॉक्स है:

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

मैं चयनित विकल्पों में से एक को "चयनित" के रूप में सेट करना चाहता हूं जो कि चयनित सूचकांक पर आधारित है।

उदाहरण के लिए, यदि मैं "नंबर 3" सेट करने का प्रयास कर रहा हूं, तो मैं यह कोशिश कर रहा हूं:

$('#selectBox')[3].attr('selected', 'selected');

लेकिन यह काम नहीं करता है। मैं jQuery का उपयोग करके सूचकांक के आधार पर एक विकल्प कैसे चुन सकता हूं?

धन्यवाद!

Comments

यह लगभग आपके पिछले प्रश्न के समान है: stackoverflow.com/questions/1280369/…

— Kobi

JQuery के

— कार्बनिक अधिवक्ता

Answer 1

नोट : उत्तर jQuery 1.6.1+ पर निर्भर है

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

---

टिप्पणी के लिए धन्यवाद, .getकाम नहीं करेगा क्योंकि यह एक DOM तत्व देता है, एक jQuery एक नहीं। ध्यान रखें कि .eqयदि आप चाहें तो फ़ंक्शन का चयनकर्ता के बाहर भी उपयोग किया जा सकता है।

$('#selectBox option').eq(3).prop('selected', true);

---

यदि आप किसी विशिष्ट अनुक्रमणिका के चयन पर निर्भर रहने के बजाय, आप अधिक उपयोग / पठनीय हो सकते हैं, तो आप मूल्य का उपयोग करना चाहते हैं :

$("#selectBox").val("3");

नोट: .val(3) इस उदाहरण के लिए भी काम करता है, लेकिन गैर-संख्यात्मक मान तार होना चाहिए, इसलिए मैंने स्थिरता के लिए एक स्ट्रिंग चुना।
(जैसे <option value="hello">Number3</option>आपको उपयोग करने की आवश्यकता है .val("hello"))

Comments

+1 - दूसरा विकल्प मेरे लिए काम करता है। जॉन Kugelman द्वारा चुना गया जवाब IE7 में मेरे लिए काम नहीं किया।

— पी। ब्रायन। मैके

अफसोस की बात है, इनमें से कोई भी तरीका मेरे लिए एक बदलाव () घटना नहीं है। मेरे पास $ ('# चयन बॉक्स') है। परिवर्तन (फ़ंक्शन () {चेतावनी ('बदला')));

— माइक जॉन्स

@ मायिकजोन - यह डिजाइन द्वारा है। जब आप प्रोग्राम को चयनित विकल्प सेट कर रहे हैं, तो आप हमेशा नहीं चाहते कि बाउंड चेंज ईवेंट ट्रिगर हो सकता है (जैसे पेज लोड इवेंट पर।) उस हल को हल करने के लिए इसे डेवलपर को तय करने के लिए छोड़ देता है। आपके मामले में आप बस $ ('# चयन बॉक्स') कह सकते हैं। परिवर्तन (); के बाद आप $ ('# selectBox') कहा जाता है। वैल ("3");

— मार्कस पोप

पहला विकल्प 0 या 1 है?

— ली मीडोर

मैंने यह उल्लेख करने के लायक समझा कि पोस्ट- jQuery 1.6.1, तत्व के बूलियन गुणों को संशोधित करने के लिए अनुशंसित विधि के .prop()बजाय है .attr()।

— DevlshOne

Answer 2

यह भी उपयोगी हो सकता है, इसलिए मैंने सोचा कि मैं इसे यहाँ जोड़ूंगा।

यदि आप आइटम के मूल्य के आधार पर एक मूल्य का चयन करना चाहते हैं और उस वस्तु का सूचकांक नहीं तो आप निम्न कार्य कर सकते हैं:

आपकी चयन सूची:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

द जक्वेरी:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

चयनित आइटम अब "नंबर 2" होगा।

Comments

नोट: $ () के बाद एक अतिरिक्त अंडरस्कोर है ... अन्यथा, यह

— काल्पनिक रूप से

+1 मैं इसे ठीक से काम करने के लिए नहीं प्राप्त कर सका, लेकिन इससे मुझे अंततः इस सिंटैक्स के साथ काम करने के लिए मिला: $ ("# selectBox विकल्प [मूल्य = 'C']") [0] .selected = true;

— वेस ग्रांट

बस ध्यान रखें कि .attr('selected', 'selected')एक ही चयन पर कई बार उपयोग नहीं किया जाना चाहिए, क्योंकि कुछ ब्राउज़र भ्रमित हो सकते हैं (कुछ मामलों में वे डोम में कई वस्तुओं को चिह्नित करना शुरू कर देते हैं selected=selected"। यदि आपको चयनित मूल्य को अधिक बार बदलने की आवश्यकता है (जैसे एक बटन पर) क्लिक करें) .prop('selected', true)मार्क द्वारा सुझाए अनुसार उपयोग करें । - क्या बस बहुत दर्द हुआ है - और समय बर्बाद किया - इस मुद्दे के कारण!

— टॉम फिंक

Answer 3

इसके बजाय यह प्रयास करें:

$("#selectBox").val(3);

Comments

यह एक तत्व से दूसरे मृत सरल को भी कॉपी करता है!

— सन्नी

टाइपो: "सिलेक्टबॉक्स" के बाद आप एक उद्धरण याद कर रहे हैं

— नील्स बॉम्ब

यह सरल और सीधा है। मैं इस समाधान को बहुत पसंद करता हूं।

— डेन बेलीफ

यह Chrome में काम करता है, लेकिन IE9 के साथ मेरे लिए काम नहीं करता है। मैं उपयोग करता हूं: $ ('# चयन बॉक्स विकल्प') [3] .selected = true; (सीन्स उत्तर)।

— cederlof

FWIW, यह मेरे लिए क्रोम में भी काम नहीं करता है। मेरे लिए काम करने वाले ": nth-child" उत्तर का उपयोग करना।

— जे टेलर

Answer 4

और भी सरल:

$('#selectBox option')[3].selected = true;

Comments

यह मेरे लिए काम करता है, मुझे INDEX नॉट वैल्यू द्वारा चयन करने की भी आवश्यकता है।

— एलन

इस उत्तर ने मुझे वह दिया जिसकी मुझे आवश्यकता थी .. मैं चयनकर्ता के 'विकल्प' भाग को याद कर रहा था जब नाम $ ('चयन [नाम = "चयन_नाम"] विकल्प) [सूचकांक] .selected = true का चयन करने का प्रयास कर रहा था;

— स्मिथ 16

Answer 5

# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

जब आप सेट चयन के लिए शीर्ष तरीकों से चयन करना चाहते हैं, तो आप
$('#select option').removeAttr('selected');पिछले चयनों को हटाने के लिए उपयोग कर सकते हैं ।

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();

Comments

+1 के लिए: $ ('# चुनिंदा विकल्प')। RemoveAttr ('चयनित'); शीर्ष पर 'चयनित' आइटम वापस करने का सबसे आसान विकल्प, या कोई परिभाषित चयन नहीं।

— माइकल ट्रू ने

Answer 6

यह समझना महत्वपूर्ण है कि val()एक selectतत्व चयनित विकल्प के मूल्य को वापस करता है, लेकिन selectedIndexजावास्क्रिप्ट में तत्व की संख्या नहीं है ।

value="7"आप के साथ विकल्प का चयन करने के लिए बस का उपयोग कर सकते हैं:

$('#selectBox').val(7); //this will select the option with value 7.

विकल्प को खाली करने के लिए एक खाली सरणी का उपयोग करें:

$('#selectBox').val([]); //this is the best way to deselect the options

और निश्चित रूप से आप कई विकल्प चुन सकते हैं *:

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

* हालांकि कई विकल्पों का चयन करने के लिए, आपके <select>तत्व में एक MULTIPLEविशेषता होनी चाहिए , अन्यथा यह काम नहीं करेगा।

Answer 7

मेरे पास हमेशा प्रोप ('चयनित') के साथ समस्याएं थीं, निम्नलिखित ने हमेशा मेरे लिए काम किया है:

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');

Answer 8

इसे इस्तेमाल करे:

$('select#mySelect').prop('selectedIndex', optionIndex);

आखिरकार, -change घटना को ट्रिगर करें:

$('select#mySelect').prop('selectedIndex', optionIndex).change();

Answer 9

आशा है कि यह भी मदद कर सकता है

$('#selectBox option[value="3"]').attr('selected', true);

Answer 10

तीसरा विकल्प चुनें

$('#selectBox').val($('#selectBox option').eq(2).val());

Jsfiddle पर उदाहरण

Answer 11

ध्यान दें:

$('#selectBox option')[3].attr('selected', 'selected') 

गलत है, एरे डेफ्रेंस आपको डोम ऑब्जेक्ट मिलता है, न कि एक जेक्वेरी ऑब्जेक्ट, इसलिए यह टाइपफ़ेयर के साथ विफल हो जाएगा, उदाहरण के लिए एफएफ में: "$ ('# सिलेक्टबॉक्स ऑप्शन') [3] .attr () फ़ंक्शन नहीं है। । "

Answer 12

मार्क और जॉन कुगेलमैन के उत्तरों को स्पष्ट करने के लिए, आप इसका उपयोग कर सकते हैं:

$('#selectBox option').eq(3).attr('selected', 'selected')

get() निर्दिष्ट तरीके से उपयोग किए जाने पर काम नहीं करेगा क्योंकि यह DOM ऑब्जेक्ट को प्राप्त करता है, jQuery ऑब्जेक्ट को नहीं, इसलिए निम्न समाधान काम नहीं करेगा:

$('#selectBox option').get(3).attr('selected', 'selected')

eq()निर्दिष्ट सूचकांक के साथ तत्व के लिए सेट jQuery फिल्टर हो जाता है। से साफ है $($('#selectBox option').get(3))। यह सब कुशल नहीं है। $($('#selectBox option')[3])अधिक कुशल है ( परीक्षण मामले देखें )।

हालांकि आपको वास्तव में jQuery ऑब्जेक्ट की आवश्यकता नहीं है। यह चाल चलेगा:

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

एक अन्य महत्वपूर्ण रूप से महत्वपूर्ण बिंदु:

"चयनित" विशेषता यह नहीं है कि आप एक चयनित रेडियो बटन कैसे निर्दिष्ट करें (फ़ायरफ़ॉक्स और क्रोम में कम से कम)। "जाँची गई" विशेषता का उपयोग करें:

$('#selectBox option')[3].checked = true;

वही चेक-बॉक्स के लिए जाता है।

Answer 13

1.4.4 में आपको एक त्रुटि मिलती है: $ ("# चयन बॉक्स") [3] .attr कोई फ़ंक्शन नहीं है

यह काम: $('#name option:eq(idx)').attr('selected', true);

जहां #nameसेलेक्ट आईडी है और idxवह विकल्प है जिसे आप चयनित करना चाहते हैं।

Answer 14

शुद्ध जावास्क्रिप्ट चयनितआइंडेक्स विशेषता जाने का सही तरीका है क्योंकि, यह शुद्ध जावास्क्रिप्ट है और क्रॉस-ब्राउज़र काम करता है:

$('#selectBox')[0].selectedIndex=4;

यहाँ दो ड्रॉपडाउन के साथ एक jsfiddle डेमो है, जिसमें से एक का उपयोग दूसरे को सेट करने के लिए किया गया है:

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

यदि आप जो चाहते हैं उसे बदलने से पहले आप इसे कॉल भी कर सकते हैं यदि आप चाहते हैं कि विकल्प टैग पर "चयनित" विशेषता है ( यहाँ फ़िडल है ):

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');

Answer 15

//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });

Answer 16

मैं इसे काम करने के लिए अक्सर ट्रिगर ('परिवर्तन') का उपयोग करता हूं

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

आईडी चयन के साथ उदाहरण = selectA1 और position_index = 0 (चयन में फ्रिस्ट विकल्प):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

Answer 17

$('#selectBox option').get(3).attr('selected', 'selected')

उपर्युक्त का उपयोग करते समय मुझे वेबकिट (क्रोम) में यह कहते हुए त्रुटियां होती रहीं:

"बिना पढ़े टाइपर: ऑब्जेक्ट # का कोई तरीका 'attr' नहीं है"

यह सिंटैक्स उन त्रुटियों को रोकता है।

$($('#selectBox  option').get(3)).attr('selected', 'selected');

Answer 18

चयनित सूची में मूल्य के आधार पर आइटम का चयन करें (विशेषकर यदि विकल्प मानों में कोई स्थान या अजीब चरित्र है) बस इसे करके:

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

इसके अलावा, यदि आपके पास एक ड्रॉपडाउन है (एक बहु-चयन के विपरीत) तो आप ऐसा करना चाह सकते हैं break;ताकि आपको पहला-मूल्य-ओवरराइट न मिले।

Answer 19

मुझे एक ऐसे समाधान की आवश्यकता है जिसमें js फ़ाइल में कोई हार्ड कोडित मान न हो; का उपयोग कर selectedIndex। दिए गए अधिकांश समाधान एक ब्राउज़र में विफल रहे। यह FF10 और IE8 में काम करता है (किसी अन्य संस्करण में परीक्षण कर सकता है)

$("#selectBox").get(0).selectedIndex = 1; 

Answer 20

यदि आप किसी आइटम की किसी विशेष संपत्ति के आधार पर किसी आइटम का चयन करना चाहते हैं तो उस प्रकार के jQuery विकल्प [प्रोप = वैल] को वह आइटम मिल जाएगा। अब मैं उस सूचकांक के बारे में परवाह नहीं करता जो मैं सिर्फ इसके मूल्य से चाहता था।

$('#mySelect options[value=3]).attr('selected', 'selected');

Answer 21

मैंने उसी समस्या का सामना किया। सबसे पहले आपको घटनाओं के माध्यम से जाने की जरूरत है (अर्थात कौन सी घटना पहले हो रही है)।

उदाहरण के लिए:

सबसे पहले घटना विकल्पों के साथ सलेक्ट बॉक्स पैदा कर रहा है।

दूसरा घटना इस तरह के वैल के रूप में किसी भी समारोह का उपयोग कर डिफ़ॉल्ट विकल्प () आदि का चयन किया जाता है

आपको यह सुनिश्चित करना चाहिए कि पहली घटना के बाद दूसरी घटना होनी चाहिए ।

यह लो दो कार्यों का कहना है की सुविधा देता है प्राप्त करने के लिए generateSelectbox () और (चुनिंदा बॉक्स genrating के लिए) selectDefaultOption ()

आपको यह सुनिश्चित करने की आवश्यकता है कि selectDefaultOption () को केवल जेनरेटशीटबॉक्स के निष्पादन के बाद ही कॉल किया जाना चाहिए ()

Answer 22

यदि आपका चयन एक गुणक है, तो आप कई मानों को भी निकाल सकते हैं:

$('#selectBox').val(['A', 'B', 'C']);

Answer 23

आप गतिशील रूप से और साथ ही चयन किया जाएगा विकल्प का चयन चर चर सेट कर सकते हैं। आप निम्नलिखित कोड की कोशिश कर सकते हैं

कोड:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

HTML कोड:

   <select id="selectBox">
       <option value="0">Number 0</option>
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
       <option value="3">Number 3</option>
       <option value="4">Number 4</option>
       <option value="5">Number 5</option>
       <option value="6">Number 6</option>
       <option value="7">Number 7</option>
 </select> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

Answer 24

कुछ ही समय:

$("#selectBox").attr("selectedIndex",index)

जहां इंडेक्स पूर्णांक के रूप में चयनित इंडेक्स है।

Comments

यह कोड $ ('# selectBox') काम करता है। प्रॉप ({selectIndex: वांछितIndex})

— jurijcz