मैं जावास्क्रिप्ट का उपयोग करके प्रोग्राम बॉक्स के चयन का मान कैसे निर्धारित करूं?

Question

मेरे पास निम्नलिखित HTML <select>तत्व हैं:

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

leaveCodeएक पैरामीटर के रूप में संख्या के साथ एक जावास्क्रिप्ट फ़ंक्शन का उपयोग करते हुए , मैं सूची में उपयुक्त विकल्प का चयन कैसे करूं?

Comments

विभिन्न तरीकों के लिए प्रदर्शन की तुलना के लिए मेरा जवाब देखें

— Toskan

Answer 1

आप इस फ़ंक्शन का उपयोग कर सकते हैं:

selectElement('leaveCode', '11')

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}

Comments

शानदार जवाब, यह विकल्प के माध्यम से लूपिंग की तुलना में आसान है। और यह मानकों के अनुरूप है: dev.w3.org/html5/spec/… । अगर ब्राउज़र असंगतताएं हैं (बेशक वहाँ हैं :) मुझे यह जानने में बहुत दिलचस्पी होगी कि वे क्या हैं। यह उस तरह की चीज है जिसे आप आमतौर पर पीपीके के लिए गिनते हैं, लेकिन वह इस विषय के लिए मेरी खोजों में दिखाने से इनकार करता है।

— philo

और कई चयन के बारे में क्या? यह कई विकल्पों (कम से कम क्रोम 25 में) के मामले में काम नहीं करता है।

— जॉर्जी इवानकिन

जैसा कि @ ring0 ने बताया, जब valueToSelect मौजूद नहीं है, तो यह क्रोम में एक रिक्त प्रविष्टि सम्मिलित करता है। जबकि IE और फ़ायरफ़ॉक्स अंतिम चयनित मूल्य को बरकरार रखता है।

— कार्तिक बोस

IE के लिए ध्यान दें: <विकल्प> में एक मूल्य होना चाहिए = 'valueToSelect' विशेषता। आप मान विकल्प के रूप में <text> .. </ विकल्प> के भीतर प्रदर्शन पाठ का उपयोग नहीं कर सकते हैं

— पीटर क्वैरिंग

यदि आपको बदले जाने की घटना की आवश्यकता है, तो आपको यह भी करना चाहिए: element.dispatchEvent(new Event('change'));

— पैट्रिक जेम्स मैकडॉगल

Answer 2

यदि आप jQuery का उपयोग कर रहे हैं, तो आप यह भी कर सकते हैं:

$('#leaveCode').val('14');

यह <option>14 के मूल्य के साथ चयन करेगा ।

---

सादे जावास्क्रिप्ट के साथ, यह भी दो Documentतरीकों से हासिल किया जा सकता है :

• इसके साथ document.querySelector, आप CSS चयनकर्ता के आधार पर एक तत्व का चयन कर सकते हैं:

  document.querySelector('#leaveCode').value = '14'

• document.getElementById()उस फ़ंक्शन के नाम का अर्थ है, के साथ अधिक स्थापित दृष्टिकोण का उपयोग करना , आपको इसके आधार पर एक तत्व का चयन करने दें id:

  document.getElementById('leaveCode').value = '14'

इन विधियों और क्रिया में jQuery फ़ंक्शन को देखने के लिए आप नीचे दिया गया कोड चला सकते हैं:

const jQueryFunction = () => {
  
  $('#leaveCode').val('14'); 
  
}

const querySelectorFunction = () => {
  
  document.querySelector('#leaveCode').value = '14' 
  
}

const getElementByIdFunction = () => {
  
  document.getElementById('leaveCode').value='14' 
  
}

input {
  display:block;
  margin: 10px;
  padding: 10px
}

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

<input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" />
<input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" />
<input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" />

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

Comments

यह बहु-चयन के लिए भी इस्तेमाल किया जा सकता है; एक स्ट्रिंग के बजाय 'वैल' फ़ंक्शन के लिए स्ट्रिंग का एक सरणी पास करें। देखें: stackoverflow.com/a/16583001/88409

— Triynko

क्या $ (leave # लीवकोड ’) को ट्रिगर करने का एक तरीका भी है। ऐसा करने से ('परिवर्तन'), कार्य ()?

— 16

$ ( "# leaveCode") वैल ( "14") परिवर्तन ()।।

— लोरेन

Answer 3

function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);

Answer 4

प्रश्न का उत्तर नहीं, लेकिन आप इंडेक्स द्वारा भी चयन कर सकते हैं, जहां मैं उस आइटम का इंडेक्स है जिसे आप चुनना चाहते हैं:

var formObj = document.getElementById('myForm');
formObj.leaveCode[i].selected = true;

आप लूप के साथ प्रदर्शन मूल्य द्वारा चयन करने के लिए आइटम के माध्यम से भी लूप कर सकते हैं:

for (var i = 0, len < formObj.leaveCode.length; i < len; i++) 
    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;

Comments

FormObj.leaveCode नहीं करना चाहिए [i] .selected = true; formObj.options [i] .selected = true; ?

— डेविड क्रिस्टोफर रेनॉल्ड्स

Answer 5

मैंने विभिन्न तरीकों की तुलना की:

जेएस या jQuery के साथ एक चयन का मान सेट करने के तरीके पर विभिन्न तरीकों की तुलना

कोड:

$(function() {
    var oldT = new Date().getTime();
     var element = document.getElementById('myId');
    element.value = 4;
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId option").filter(function() {
        return $(this).attr('value') == 4;
    }).attr('selected', true);
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId").val("4");
    console.error(new Date().getTime() - oldT);
});

~ 4000 तत्वों के साथ एक चयन पर आउटपुट:

• 1 मि
• 58 एमएस
• 612 मि

फ़ायरफ़ॉक्स 10. नोट के साथ: केवल यही कारण है कि मैंने यह परीक्षण किया, क्योंकि jQuery ने हमारी सूची में ~ 2000 प्रविष्टियों के साथ सुपर खराब प्रदर्शन किया (उनके पास विकल्पों के बीच लंबे समय तक ग्रंथ थे)। हम लगभग 2 साल की देरी के बाद एक घाटी ()

साथ ही ध्यान दें: मैं वास्तविक मूल्य के आधार पर मूल्य निर्धारित कर रहा हूं, न कि पाठ मूल्य।

Answer 6

document.getElementById('leaveCode').value = '10';

चयन को "वार्षिक अवकाश" पर सेट करना चाहिए

Answer 7

मैंने उपरोक्त जावास्क्रिप्ट / jQuery- आधारित समाधानों की कोशिश की, जैसे:

$("#leaveCode").val("14");

तथा

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;

एक AngularJS ऐप में, जहां आवश्यक था <select> तत्व था।

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

AngularJS सत्यापन को मजबूर करने के लिए, एक विकल्प का चयन करने के बाद jQuery परिवर्तन () कॉल करें :

$("#leaveCode").val("14").change();

तथा

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();

Comments

जब आप पहले से ही इसे कोणीय के साथ कर सकते हैं तो इसके लिए jQuery का उपयोग क्यों करें? स्वयं कोणीय का उपयोग करते समय, आपके पास मूल्य को निर्धारित करने की क्षमता नहीं है, परिवर्तन को ट्रिगर करने के लिए अंतर्निहित समर्थन के साथ (कोई विचार नहीं है, मैं प्रतिक्रिया का उपयोग करता हूं, बस 5 सेकंड के बाद यह पद मिला: stackoverflow.com/questions/ 50302062 /… )? क्योंकि इसका मतलब है कि आपको कोणीय के चारों ओर एक अतिरिक्त "30kb पुस्तकालय के साथ हैक नहीं करना होगा" बस इसके लिए :) :)

— SidOfc

Answer 8

function foo(value)
{
    var e = document.getElementById('leaveCode');
    if(e) e.value = value;
}

Answer 9

सबसे आसान तरीका यदि आपको:
1) एक बटन पर क्लिक करें जो चुनिंदा विकल्प को परिभाषित करता है
2) दूसरे पृष्ठ पर जाएं, जहां चयन विकल्प है
3 है) क्या उस विकल्प का मूल्य दूसरे पृष्ठ पर चुना गया है

1) आपके बटन लिंक (कहते हैं, होम पेज पर)

<a onclick="location.href='contact.php?option=1';" style="cursor:pointer;">Sales</a>
<a onclick="location.href='contact.php?option=2';" style="cursor:pointer;">IT</a>

(जहां contact.php आपके पेज को चुनिंदा विकल्पों के साथ है। पृष्ठ url के पास ध्यान दें? विकल्प = 1 या 2)

2) इस कोड को अपने दूसरे पेज पर डालें (मेरा केस contact.php )

<?
if (isset($_GET['option']) && $_GET['option'] != "") {
$pg = $_GET['option'];              
} ?>

3) बटन के क्लिक के आधार पर, विकल्प का चयन करें

<select>
<option value="Sales" <? if ($pg == '1') { echo "selected"; } ?> >Sales</option>
<option value="IT" <? if ($pg == '2') { echo "selected"; } ?> >IT</option>
</select>

.. और इसी तरह।
इसलिए यह url में GET के माध्यम से किसी अन्य पृष्ठ (चुनिंदा विकल्प सूची के साथ) के मान को पास करने का एक आसान तरीका है। कोई रूप नहीं, कोई आईडी नहीं .. सिर्फ 3 चरण और यह सही काम करता है।

Answer 10

तत्व की आईडी के लिए एक चर क्यों नहीं जोड़ा गया है और इसे पुन: प्रयोज्य कार्य करना है?

function SelectElement(selectElementId, valueToSelect)
{    
    var element = document.getElementById(selectElementId);
    element.value = valueToSelect;
}

Answer 11

मान लीजिए कि आपके फॉर्म का नाम form1 है :

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i<lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}

Answer 12

इन रेखाओं के साथ कुछ होना चाहिए:

function setValue(inVal){
var dl = document.getElementById('leaveCode');
var el =0;
for (var i=0; i<dl.options.length; i++){
  if (dl.options[i].value == inVal){
    el=i;
    break;
  }
}
dl.selectedIndex = el;
}

Answer 13

function selecetElement() {
 var selectedValue = document.getElementById('leaveCode');
 selectedValue.value = "11";
}

Comments

सोलह मौजूदा उत्तरों के साथ ग्यारह साल पुराने प्रश्न के उत्तर को जोड़ते समय यह बताना बहुत महत्वपूर्ण है कि आपके उत्तर के प्रश्न का नया पहलू क्या है। यदि आप नहीं करते हैं और आपका परिवर्तन सूक्ष्म है, तो यह छूट सकता है और आपका उत्तर देर से डुप्लिकेट के रूप में हटा दिया जाता है। केवल और कैसे काम करते हैं, इसकी कुछ व्याख्या जोड़कर कोड केवल उत्तरों को लगभग हमेशा बेहतर बनाया जा सकता है।

— जेसन एलर

Answer 14

यदि PHP का उपयोग कर आप कुछ इस तरह की कोशिश कर सकते हैं:

$value = '11';
$first = '';
$second = '';
$third = '';
$fourth = '';

switch($value) {
            case '10' :
                $first = 'selected';
            break;
            case '11' :
                $second = 'selected';
            break;
            case '14' :
                $third = 'selected';
            break;
            case '17' :
                $fourth = 'selected';
            break;
        }

echo'
<select id="leaveCode" name="leaveCode">
  <option value="10" '. $first .'>Annual Leave</option>
  <option value="11" '. $second .'>Medical Leave</option>
  <option value="14" '. $third .'>Long Service</option>
  <option value="17" '. $fourth .'>Leave Without Pay</option>
</select>';

Answer 15

आप सबसे अधिक यह चाहते हैं:

$("._statusDDL").val('2');

या

$('select').prop('selectedIndex', 3); 

Comments

यह मान रहा है कि ओपी JQuery का उपयोग कर रहा है

— बैरी माइकल डॉयल

@BarryMichaelDoyle, जो नहीं है, क्योंकि यहां तक ​​कि सवालों के शीर्षक के साथ समाप्त होता है using JavaScript।

— इलियान ओनोफ्रेई

Answer 16

मुझे डर है कि मैं इस समय इसका परीक्षण करने में असमर्थ हूं, लेकिन अतीत में, मेरा मानना ​​है कि मुझे प्रत्येक विकल्प को एक आईडी देनी थी, और फिर मैंने कुछ ऐसा किया:

document.getElementById("optionID").select();

अगर वह काम नहीं करता है, तो शायद यह आपको एक समाधान के करीब ले जाएगा: पी

Comments

HTMLOptionElement एक नहीं है select()विधि (यह सब HTML तत्वों पर मानक सेट पर किसी भी अतिरिक्त तरीकों को परिभाषित नहीं करता)। हालांकि, आप selectedसंपत्ति को सही पर सेट कर सकते हैं।

— Mrhhite