चयनित बॉक्स का चयनित विकल्प सेट करें

Question

मैं एक विकल्प सेट करना चाहता हूं जिसे पहले पृष्ठ लोड पर प्रदर्शित किया जाना था। मैंने इसे निम्नलिखित कोड के साथ आज़माया:

$("#gate").val('Gateway 2');

साथ में

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>

लेकिन यह काम नहीं करता है। कोई विचार?

Comments

वास्तव में यह है कि यह कैसे काम करना चाहिए, क्या आप सुनिश्चित हैं कि आपने दस्तावेज़ में मूल्य निर्धारित किया है। शायद कोड निष्पादित हो गया है जब चयन बॉक्स अभी तक तैयार नहीं है।

— मॉर्फ

Answer 1

यह निश्चित रूप से काम करना चाहिए। यहाँ एक डेमो है । सुनिश्चित करें कि आपने अपना कोड एक में रखा है $(document).ready:

$(function() {
    $("#gate").val('gateway_2');
});

Comments

ठीक है, जब मैं सूची को नीचे गिराता हूं, तो इसे हाइलाइट किया जाता है, लेकिन सूची में पहले तत्व के रूप में प्रदर्शित नहीं किया जाता है

— अपवोट

आह मैं इसे दस्तावेज़ तैयार समारोह में नहीं घोषित किया ... धन्यवाद!

— वोट दें

"चयनित" के लिए "चयनित" विशेषता को सेट करने के रूप में अच्छा नहीं है।

— अदल

@ @ चयनित ’विशेषता को 'चयनित’ करने के लिए यह उतना अच्छा क्यों नहीं है?

— शॉन

बस किसी और के चमत्कार होने की स्थिति में, 'Gateway 2'फंक्शन को पास किया गया चयन विकल्प valकी valueविशेषता के मूल्य से मेल खाता है , न कि उसके पाठ से। यह JSFiddle देखें , जो डारिन के डेमो का एक बहुत ही हल्के से संपादित संस्करण है, उदाहरण के लिए कि मेरा क्या मतलब है।

— केनी एविट

Answer 2

$(document).ready(function() {
    $("#gate option[value='Gateway 2']").prop('selected', true);
    // you need to specify id of combo to set right combo, if more than one combo
});

Answer 3

$('#gate').val('Gateway 2').prop('selected', true);

Comments

बहुत कुछ ऐसा है $('#your-select-box-id :nth-child(2)').prop('selected', true)जो ड्रॉप-बॉक्स के दृश्य अद्यतन के साथ काम करता है।

— बिग रिच

केवल वही जो मेरे लिए काम करता था। संदेह है क्योंकि मैं एक कस्टम चुनिंदा लाइब्रेरी का उपयोग कर रहा हूं।

— लुई एम।

Answer 4

मैंने jQuery .val () विधि का उपयोग करके एक महत्वपूर्ण कमी पाई है।

<select id="gate"></select>
$("#gate").val("Gateway 2");

यदि यह सेलेक्ट बॉक्स (या कोई अन्य इनपुट ऑब्जेक्ट) एक फॉर्म में है और फॉर्म में उपयोग किया गया एक रीसेट बटन है, जब रीसेट बटन पर क्लिक किया जाता है तो सेट वैल्यू क्लियर हो जाएगी और शुरुआत मूल्य पर रीसेट नहीं होगा जैसा कि आप उम्मीद करेंगे।

यह मेरे लिए सबसे अच्छा काम करने लगता है।

बक्से का चयन करें

<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);

पाठ इनपुट के लिए

<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")

Textarea आदानों के लिए

<textarea id="gate"></textarea>
$("#gate").html("your desired value")

चेकबॉक्स बॉक्स के लिए

<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);

रेडियो बटन के लिए

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);

Answer 5

  $("#form-field").val("5").trigger("change");

Comments

अच्छा होता अगर आप इसके आसपास कुछ जानकारी शामिल करते। यह एक शानदार उदाहरण है कि आप यह कैसे करते हैं, यदि आपके पास वह कोड है जो चयन करने के लिए परिवर्तनों को देख रहा है।

— sean.boyer

Answer 6

यह ठीक काम करता है। देखिये यह फील: http://jsfiddle.net/kveAL/

यह संभव है कि आपको अपने jQuery को एक में घोषित करने की आवश्यकता हो $(document).ready() हैंडलर ?

इसके अलावा, आपके पास दो तत्व हो सकते हैं जिनके पास एक ही आईडी है?

Answer 7

यह एक और विकल्प होगा:

$('.id_100 option[value=val2]').prop('selected', true);

Answer 8

मुझे भी यही समस्या थी।

समाधान: एक ताज़ा जोड़ें।

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');

Comments

यह केवल

— jqueryui selectmenu के लिए है

Answer 9

मुझे पता है कि उत्तर के कई पुनरावृत्तियों हैं, लेकिन अब इसके लिए jquery या किसी अन्य बाहरी पुस्तकालय की आवश्यकता नहीं है और इसे केवल निम्नलिखित के साथ बहुत आसान पूरा किया जा सकता है।

document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true);

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='Gateway 1'>Gateway 1</option>
    <option value='Gateway 2'>Gateway 2</option>
</select>

Comments

महान समाधान। लेकिन ऐसा लगता है कि यह पहले से चयनित विकल्पों में से चयनित विशेषता को नहीं हटाता है

— सिस्टम रिबूटर

Answer 10

कुछ मामले हो सकते हैं

$('#gate option[value='+data.Gateway2+']').attr('selected', true);

Answer 11

मेरी समस्या

get_courses(); //// To load the course list
$("#course").val(course); //// Setting default value of the list

मेरी भी यही समस्या थी । आपके कोड से एकमात्र अंतर यह है कि मैं ajax कॉल के माध्यम से चयन बॉक्स को लोड कर रहा था और जैसे ही ajax कॉल को निष्पादित किया गया, मैंने चयन बॉक्स का डिफ़ॉल्ट मान सेट किया था

समाधान

get_courses();
   setTimeout(function() {
     $("#course").val(course);
  }, 10);

Comments

आपने समस्या का सही विश्लेषण किया, लेकिन समाधान खराब और नाजुक है। आपको अपने ajax कॉल से जुड़े कॉलबैक फ़ंक्शन का उपयोग करना होगा

— ixde

Answer 12

मुझे एक समस्या थी जहां कॉल से पहले सिंटैक्स त्रुटि के कारण मान सेट नहीं किया गया था।

$("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val
$("#gate").val('Gateway 2'); //this line didn't work.

कॉल से पहले सिंटैक्स त्रुटियों की जाँच करें।

Comments

सिंटैक्स त्रुटियों के लिए जाँच करने के लिए यह याद दिलाने के लिए जितना उपयोगी है, यह एक उत्तर नहीं है।

— शॉटगन निंजा

Answer 13

$(function() {
$("#demo").val('hello');
});

Answer 14

// Make option have a "selected" attribute using jQuery

var yourValue = "Gateway 2";

$("#gate").find('option').each(function( i, opt ) {
    if( opt.value === yourValue ) 
        $(opt).attr('selected', 'selected');
});

Comments

यह चयनित मूल्य से भी आगे निकल जाएगा, जो कि अक्षम है

— डैनियल नुरियेव

प्लस .attr()इस उत्तर को पोस्ट करने से पहले से ही गलत तरीके से कर रहा है।

— शुभ अंक

Answer 15

@ रिक्शा और @ कोरहा (दोनों thx!) को जोड़ना

AJAX के साथ विकल्पों का निर्माण करते समय के समय दस्तावेज़ बनाया जा सकता है, इससे पहले कि सूची बनाई जाए, इसलिए

यह काम नहीं करता है

$(document).ready(function() {
    $("#gate").val('Gateway 2');
});

यह करता है

एक टाइमआउट काम करता है लेकिन @ रिक्शे के अनुसार यह नाजुक है (मुझे वास्तव में 10ms के बजाय 20ms की आवश्यकता थी)। AJAX फ़ंक्शन के अंदर इसे फिट करना बेहतर है:

$("#someObject").change(function() {
    $.get("website/page.php", {parameters}, function(data) {
        $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
        $("#gate").val('Gateway 2');
    }, "json");
});