jQuery - अपने पाठ विवरण के माध्यम से एक चयनित नियंत्रण के चयनित मूल्य की स्थापना

Question

मेरे पास एक चयन नियंत्रण है, और एक जावास्क्रिप्ट चर में मेरे पास एक पाठ स्ट्रिंग है।

JQuery का उपयोग करके मैं चयनित नियंत्रण के चयनित तत्व को मेरे द्वारा दिए गए पाठ विवरण के साथ आइटम के रूप में सेट करना चाहता हूं (मूल्य के विपरीत, जो मेरे पास नहीं है)।

मुझे पता है कि मूल्य द्वारा इसे सेट करना बहुत मामूली है। जैसे

$("#my-select").val(myVal);

लेकिन मैं इसे पाठ विवरण के माध्यम से करने पर थोड़ा अड़ गया। मुझे लगता है कि पाठ विवरण से मूल्य प्राप्त करने का एक तरीका होना चाहिए, लेकिन मेरा मस्तिष्क शुक्रवार दोपहर को एड-आउट काम करने में सक्षम होने के लिए है।

Comments

@DanAtkinson खुद ऐसा ही करने वाले थे। चयन का इस प्रश्न से कोई लेना-देना नहीं है।

— Thecoshman 13:14

Answer 1

JQuery v1.6 + के लिए विवरण द्वारा चयन करें

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).prop('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

jQuery के संस्करण 1.6 से नीचे और 1.4 के बराबर या उससे अधिक है

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).attr('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

ध्यान दें कि जब यह दृष्टिकोण 1.6 से ऊपर के संस्करणों में काम करेगा, लेकिन 1.9 से कम है, तो इसे 1.6 से हटा दिया गया है। यह jQuery 1.9+ में काम नहीं करेगा ।

---

पिछला संस्करण

val() दोनों मामलों को संभालना चाहिए।

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

Comments

ऐसा लगता है कि इसे काम नहीं करना चाहिए (ऐसा प्रतीत होता है कि यह अस्पष्ट हो सकता है) लेकिन यह वास्तव में मेरे लिए ठीक काम करना चाहिए। धन्यवाद।

— डेनसिंगरमैन

ध्यान दें कि valueयदि विशेषता निर्दिष्ट की गई है, तो jQuery 1.4 ने अब इस व्यवहार को बदल दिया है और यदि valueविशेषता गायब है तो केवल पाठ द्वारा चयन करें । तो इस उदाहरण $('select').val('Two')में 1.3.x में दूसरे विकल्प का चयन करेंगे, लेकिन 1.4.x में कुछ भी नहीं करेंगे।

— वर्धमान ताजा

तो, अब 1.4 में इसे करने का सबसे अच्छा तरीका क्या है?

— जेआर लॉरहॉर्न

JQuery के अधिक हाल के संस्करणों में .val ('not-a-option-value') पहले विकल्प का चयन रीसेट करेगा।

— dland

इस प्रश्न का पहला उत्तर समाधान पोस्ट 1.3.x stackoverflow.com/questions/3644449/…

— DA है।

Answer 2

मैंने इसका परीक्षण नहीं किया है, लेकिन यह आपके लिए काम कर सकता है।

$("select#my-select option")
   .each(function() { this.selected = (this.text == myVal); });

Answer 3

यह प्रयास करें ... टेक्स्ट myText के साथ विकल्प चुनने के लिए

$("#my-Select option[text=" + myText +"]").prop("selected", true);

Comments

@ स्पॉल्सन के जवाब ने मेरे लिए काम किया ... मैंने इसे बिना सोचे

— Jay Corbett

कई मामलों में, यह दृष्टिकोण दुर्भाग्य से काम नहीं करता है। मुझे भी $("#my-Select option[text=" + myText +"]").get(0).selected = true;समय-समय पर क्लासिक शैली का समाधान करना पड़ा : (...

— शाहरियार इमानोव

सुनिश्चित करें कि आप पुन: सेटिंग से पहले चयनित विशेषता को हटा रहे हैं, अन्यथा यह काम नहीं करेगा (मेरे लिए 1.9 में काम करता है)

— निबंध

1.9 के लिए @MarkW, के .propबजाय का उपयोग करें .attr; परिवर्तन का कारण यह है कि 1.9 jQuery में पुराने हैक को अक्षम कर दिया गया है जो आपको .attrकुछ DOM गुणों के साथ-साथ HTML विशेषताओं को बदलने के लिए उपयोग करते हैं। (Google javascript dom properties vs attributesयदि आप भेद नहीं जानते हैं।)

— मार्क अमेरी

JQuery 1.9+ संगतता के .prop('selected', true)बजाय उपयोग करने के .attr('selected', 'selected')लिए अद्यतित उत्तर ।

— शाम

Answer 4

मैं इसे इस तरह से करता हूं (jQuery 1.9.1)

$("#my-select").val("Dutch").change();

नोट: परिवर्तन मत भूलना (), मुझे उस वजह से लंबे समय तक खोज करनी थी :)

Comments

काश मैं कई बार उत्थान कर पाता। इसके एक घंटे पहले छोड़ने का समय है और अब मैं घर जा सकता हूं।

— बॉब जॉर्डन

बहुत बढ़िया जवाब! संक्षिप्त और सरल ... यह शीर्ष पर होना चाहिए ... मतदान जारी रखें।

— मुहम्मद तारिक

यह मेरे मामले में काम किया, धन्यवाद! लेकिन क्या यह प्रदर्शित पाठ द्वारा नहीं चुना जाता है, जैसा कि ओपी ने अनुरोध किया है, लेकिन मूल्य से ही, जो ओपी के पास नहीं है?

— ब्रैंडन रोड्स

Answer 5

$("#myselect option:contains('YourTextHere')").val();

आपके पाठ विवरण वाले पहले विकल्प का मान लौटाएगा। यह परीक्षण किया और काम करता है।

Comments

धन्यवाद - मुझे लगता है कि यह मेरे द्वारा उपयोग किए जाने वाला संस्करण हो सकता है, क्योंकि जब कोई मिलान पाठ नहीं होता है, तो मुझे तर्क की भी आवश्यकता होती है, और ऐसा करने में सक्षम होने के लिए यह सबसे आसान तंत्र लगता है।

— डेनसिंगरमैन

ध्यान रखें, यह पाठ से मेल खाने वाले पहले विकल्प के लिए केवल मूल्य प्राप्त करेगा।

— रस कैम

इसके अलावा, आप वैल () के बजाय लिपटे सेट पर चेन अटायर ("चयनित", "चयनित") कर सकते हैं और यह कैरोलिनाजाय 65 के जवाब के समान काम करेगा

— रस कैम

ओपी ने कहा " सेटिंग मूल्य" नहीं " मूल्य प्राप्त करना "

— रूसो

Answer 6

सभी jQuery संस्करण जटिलताओं से बचने के लिए, मैं ईमानदारी से इनमें से एक सरल जावास्क्रिप्ट फ़ंक्शंस का उपयोग करने की सलाह देता हूं ...

function setSelectByValue(eID,val)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].value==val) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

function setSelectByText(eID,text)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].text==text) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

Comments

यह मूल्य या पाठ के माध्यम से एक विकल्प का चयन करने में सक्षम बनाता है (फ़ंक्शन कहा जाता है पर निर्भर करता है)। उदाहरण के लिए: setSelectByValue ('सॉसेज', '2'); मिल जाएगा, और चयन करें, "सॉसेज" की आईडी के साथ चयन ऑब्जेक्ट में मूल्य "2" का विकल्प।

— डेव

@ नील उह ... यह सवाल का जवाब देता है?

— मार्क अमेरी

Answer 7

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन मैं इसे jQuery 1.10.3 और उपरोक्त समाधानों का उपयोग करके पाठ द्वारा चयन करने के लिए नहीं प्राप्त कर सका। मैंने निम्नलिखित कोड (स्पॉल्सन के समाधान का रूपांतर) का उपयोग करके समाप्त किया:

      var textToSelect = "Hello World";

      $("#myDropDown option").each(function (a, b) {
            if ($(this).html() == textToSelect ) $(this).attr("selected", "selected");
        });

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

Answer 8

इस लाइन ने काम किया:

$("#myDropDown option:contains(myText)").attr('selected', true);

Answer 9

 $("#Test").find("option:contains('two')").each(function(){
     if( $(this).text() == 'two' ) {
        $(this).attr("selected","selected");
     }
 });

यदि कथन "दो" और "दो तीन" के साथ सटीक मेल खाता है, तो मिलान नहीं किया जाएगा

Comments

नहीं, यह मेरा मतलब नहीं है। मुझे लगता है कि मेरी टिप्पणी थोड़ी अस्पष्ट थी, इसलिए मैंने इसे हटा दिया। मैंने हालांकि आपके जवाब को गलत ठहराया, क्योंकि यह मेरी स्थिति के लिए काम करता है।

— जगदीप

Answer 10

1.7+ के साथ सबसे आसान तरीका है:

$("#myDropDown option:text=" + myText +"").attr("selected", "selected"); 

1.9+

$("#myDropDown option:text=" + myText +"").prop("selected", "selected"); 

परीक्षण किया और काम करता है।

Comments

1.9+ में नहीं। 1.6 के बाद से आपको .propDOM प्रॉपर्टीज़ को बदलने के लिए उपयोग करना चाहिए , न कि .attr(जो HTML / DOM विशेषताओं के लिए है)। देखें stackoverflow.com/q/5874652/1709587

— मार्क अमेरी

मैं "चयनित" के सत्य मूल्य के बजाय ("चयनित", सत्य) का उपयोग

— करूंगा

Answer 11

यहाँ बहुत ही सरल तरीका है। plz इसका उपयोग करें

$("#free").val("y").change();

Answer 12

jquery चयनित बॉक्स प्लगइन पर एक नज़र डालें

selectOptions(value[, clear]): 

मान द्वारा विकल्पों का चयन करें, पैरामीटर के रूप में एक स्ट्रिंग का उपयोग करके $("#myselect2").selectOptions("Value 1");या एक नियमित अभिव्यक्ति $("#myselect2").selectOptions(/^val/i);।

आप पहले से चयनित विकल्पों को भी साफ़ कर सकते हैं: $("#myselect2").selectOptions("Value 2", true);

Answer 13

बस एक साइड नोट पर। मेरा चयनित मान सेट नहीं किया जा रहा था। और मैंने सभी नेट पर खोज की थी। वास्तव में मुझे वेब सेवा से कॉल बैक करने के बाद एक मूल्य का चयन करना था, क्योंकि मुझे इससे डेटा मिल रहा था।

$("#SelectMonth option[value=" + DataFromWebService + "]").attr('selected', 'selected'); 
$("#SelectMonth").selectmenu('refresh', true);

इसलिए चयनकर्ता का ताज़ा करना केवल एक चीज थी जो मुझे याद आ रही थी।

Comments

यह सही है - पूरी तरह से ... मैं दूसरी पंक्ति के लिए कोई कारण नहीं देखता हूं। के रूप में काम करना चाहिए।

— सगिव एसईओ

Answer 14

मैंने पाया कि उपयोग करने से attrआप कई विकल्पों के साथ समाप्त हो जाएंगे जब आप नहीं चाहते थे - समाधान का उपयोग करना है prop:

$("#myDropDown option:text=" + myText +"").prop("selected", "selected");

Answer 15

मुझे ऊपर के उदाहरणों के साथ एक समस्या थी, और यह समस्या इस तथ्य के कारण थी कि मेरे चयनित बॉक्स मान 6 वर्णों की निश्चित लंबाई के तार के साथ पूर्वनिर्मित हैं, लेकिन पैरामीटर को निश्चित लंबाई में पारित नहीं किया जा रहा है।

मेरे पास एक रैप्ड फ़ंक्शन है जो एक स्ट्रिंग को सही पैड देगा, निर्दिष्ट लंबाई तक, और निर्दिष्ट चरित्र के साथ। इसलिए, पैरामीटर को पैड करने के बाद यह काम करता है।

$('#wsWorkCenter').val(rpad(wsWorkCenter, 6, ' '));


function rpad(pStr, pLen, pPadStr) {
if (pPadStr == '') {pPadStr == ' '};
while (pStr.length < pLen)
    pStr = pStr + pPadStr;
return pStr; 
} 

Answer 16

 $('#theYear').on('change', function () {
 FY = $(this).find('option:selected').text();
 $('#theFolders').each(function () {
     $('option:not(:contains(' + FY + '))', this).hide();
 });
 $('#theFolders').val(0);
});

$('#theYear').on('mousedown', function () {
 $('#theFolders option').show().find('option:contains("Select")', this).attr('selected', 'selected');
});

Answer 17

यह स्वीकार किया गया उत्तर सही नहीं लगता है, जबकि .val ('newValue') फ़ंक्शन के लिए सही है, इसके नाम से चयन को पुनः प्राप्त करने की कोशिश करना मेरे लिए काम नहीं करता है, मुझे अपना तत्व प्राप्त करने के लिए आईडी और क्लासनाम का उपयोग करना पड़ा।

Answer 18

एक आसान विकल्प है। बस अपना सूची विकल्प सेट करें और उसके पाठ को चयनित मान के रूप में सेट करें:

$("#ddlScheduleFrequency option").selected(text("Select One..."));

Answer 19

चुनिंदा बॉक्स के बच्चों को प्राप्त करें; उनके माध्यम से पाश; जब आपको वह मिल जाए जिसे आप चाहते हैं, तो इसे चयनित विकल्प के रूप में सेट करें; लूपिंग को रोकने के लिए गलत लौटें।