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

Question

मेरे पास विकल्प मेनू इस प्रकार है:

<form name="AddAndEdit">
   <select name="list" id="personlist">
      <option value="11">Person1</option>
      <option value="27">Person2</option>
      <option value="17">Person3</option>
      <option value="10">Person4</option>
      <option value="7">Person5</option>
      <option value="32">Person6</option>
      <option value="18">Person7</option>
      <option value="29">Person8</option>
      <option value="28">Person9</option>
      <option value="34">Person10</option>
      <option value="12">Person11</option>
      <option value="19">Person12</option>
   </select>
</form>

और अब मैं href का उपयोग करके चयनित विकल्प को बदलना चाहता हूँ। उदाहरण के लिए:

<a href="javascript:void(0);"
  onclick="document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected';">change</a>

लेकिन मैं विकल्प का चयन करना चाहता हूं value=11 (Person1), नहीं Person12।

मैं इस कोड को कैसे बदलूं?

Answer 1

परिवर्तन

document.getElementById('personlist').getElementsByTagName('option')[11].selected = 'selected'

सेवा

document.getElementById('personlist').value=Person_ID;

Comments

यह कई मूल्यों के साथ कैसे काम करता है? उदाहरण के लिए: document.getElementById('personlist').value=id1,id2काम नहीं करेगा, इसे कैसे प्रबंधित करें?

— utdev

@utdev यहां कई चयन के लिए एक समाधान है stackoverflow.com/a/1296068/1251563 टिप: आपको एक लूप का उपयोग करने की आवश्यकता है

— breq

तो मैं ऐसा कुछ नहीं कर सकता .value = id1, id2या .value = [array]?

— utv

@utdev दुर्भाग्य से नहीं ... आपको एक लूप का उपयोग करने की आवश्यकता है

— breq

साथ ही आप क्लास को सेट किए बिना कुछ चुनिंदा विकल्पों के माध्यम से मूल्य प्राप्त कर सकते हैं var id = document.getElementById('personlist').value। मैं अलग जवाब में इस्तेमाल किया, वैसे भी धन्यवाद!

— Alper

Answer 2

चयन बॉक्स को संभालने के लिए शुद्ध जावास्क्रिप्ट कोड के रूप में उपकरण:

ग्राफिकल अंडरस्टैंडिंग:

चित्र - A

---

छवि - बी

---

छवि - सी

Updated - 25-June-2019 | फिडलर डेमो

जावास्क्रिप्ट कोड:

/**
 * Empty Select Box
 * @param eid Element ID
 * @param value text
 * @param text text
 * @author Neeraj.Singh
 */
function emptySelectBoxById(eid, value, text) {
    document.getElementById(eid).innerHTML = "<option value='" + value + "'>" + text + "</option>";
}


/**
 * Reset Select Box
 * @param eid Element ID
 */

function resetSelectBoxById(eid) {
    document.getElementById(eid).options[0].selected = 'selected';
}


/**
 * Set Select Box Selection By Index
 * @param eid Element ID
 * @param eindx Element Index
 */

function setSelectBoxByIndex(eid, eindx) {
    document.getElementById(eid).getElementsByTagName('option')[eindx].selected = 'selected';
    //or
    document.getElementById(eid).options[eindx].selected = 'selected';
}


/**
 * Set Select Box Selection By Value
 * @param eid Element ID
 * @param eval Element Index
 */
function setSelectBoxByValue(eid, eval) {
    document.getElementById(eid).value = eval;
}


/**
 * Set Select Box Selection By Text
 * @param eid Element ID
 * @param eval Element Index
 */
function setSelectBoxByText(eid, etxt) {
    var eid = document.getElementById(eid);
    for (var i = 0; i < eid.options.length; ++i) {
        if (eid.options[i].text === etxt)
            eid.options[i].selected = true;
    }
}


/**
 * Get Select Box Text By ID
 * @param eid Element ID
 * @return string
 */

function getSelectBoxText(eid) {
    return document.getElementById(eid).options[document.getElementById(eid).selectedIndex].text;
}


/**
 * Get Select Box Value By ID
 * @param eid Element ID
 * @return string
 */

function getSelectBoxValue(id) {
    return document.getElementById(id).options[document.getElementById(id).selectedIndex].value;
}

Comments

शुद्ध जावास्क्रिप्ट के साथ एक चयन के साथ बातचीत करने के लिए महान उदाहरण!

— श्रीजीटी

लिंक "फिडलर डेमो" अब 404 में परिणाम / पृष्ठ नहीं मिला :-(

— Genki

सवाल यह है कि "मैं जावास्क्रिप्ट का उपयोग करके HTML चयनित विकल्प को कैसे बदलूं?"। आप बस कुछ भी जवाब दिए बिना कोड का एक टुकड़ा कॉपी / पेस्ट करें।

— थॉमस

Answer 3

मेरा मानना ​​है कि ब्लॉग पोस्ट जावास्क्रिप्ट शुरुआती - मूल्य से एक ड्रॉपडाउन विकल्प का चयन करें जो आपकी मदद कर सकता है।

<a href="javascript:void(0);" onclick="selectItemByValue(document.getElementById('personlist'),11)">change</a>

function selectItemByValue(elmnt, value){

  for(var i=0; i < elmnt.options.length; i++)
  {
    if(elmnt.options[i].value === value) {
      elmnt.selectedIndex = i;
      break;
    }
  }
}

Comments

breakचयनित मूल्य मिलने के बाद आपको संभवतः अपने लूप से बाहर निकलना चाहिए । यदि सूची लंबी है और लक्ष्य मान पहले से एक है तो समय बचाता है।

— डेसकॉग

Answer 4

आप इस तरह select.options.selectedIndex DOM विशेषता भी बदल सकते हैं:

function selectOption(index){ 
  document.getElementById("select_id").options.selectedIndex = index;
}

<p>
<select id="select_id">
  <option selected>first option</option>
  <option>second option</option>
  <option>third option</option>
</select>
</p>
<p>
  <button onclick="selectOption(0);">Select first option</button>
  <button onclick="selectOption(1);">Select second option</button>
  <button onclick="selectOption(2);">Select third option</button>
</p>

Answer 5

mySelect.value = myValue;

mySelectआपका चयन बॉक्स कहां है, और myValueवह मान है जिसे आप इसे बदलना चाहते हैं।

Comments

सभी ने इसे वोट क्यों नहीं दिया, क्या यह एक नई विशेषता है? मुझे केवल हाल के ब्राउज़रों का समर्थन करने की आवश्यकता है, हालांकि यह किसी भी तरह से चल रहा है।

— antont

Answer 6

आप JQuery का भी उपयोग कर सकते हैं

$(document).ready(function () {
  $('#personlist').val("10");
}

Comments

या, क्वेरी के बिना, अनावश्यक ओवरहेड के पूरे गुच्छा को सहेजना document.querySelector('#personlist').value=10;,।

— मंजींगो

Answer 7

यदि आप जावास्क्रिप्ट के साथ विकल्प जोड़ रहे हैं

function AddNewOption(userRoutes, text, id) 
{
    var option = document.createElement("option");
    option.text = text;
    option.value = id;
    option.selected = "selected";
    userdRoutes.add(option);
}

Comments

मुझे लगता है कि सवाल यह था कि "मैं जावास्क्रिप्ट का उपयोग करके HTML चयनित विकल्प को कैसे बदलूं?"

— मंजींगो

Answer 8

एक सरणी इंडेक्स 0. से शुरू होगा। यदि आप मान = 11 (पर्सन 1) चाहते हैं, तो आप इसे पोजीशन के साथ प्राप्त करेंगे getElementsByTagName('option')[10].selected।

Answer 9

यह एक पुरानी पोस्ट है, लेकिन अगर कोई अभी भी इस तरह की समस्या का समाधान ढूंढ रहा है, तो यहां मैं यह बता रहा हूं:

<script>
  document.addEventListener("DOMContentLoaded", function(e) {
    document.forms['AddAndEdit'].elements['list'].value = 11;
  });
</script>