আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল নির্বাচিত বিকল্পটি পরিবর্তন করব?

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 এখানে একাধিক নির্বাচন করার জন্য একটি সমাধান পাওয়া যাবে stackoverflow.com/a/1296068/1251563 টিপ: আপনি যদি একটি লুপ ব্যবহার করতে হবে

— breq

তাই আমি ভালো কিছু করতে পারবো না .value = id1, id2বা .value = [array]?

— উতদেব

@utdev দুর্ভাগ্যবশত কোন ... আপনি একটি লুপ ব্যবহার করতে হবে

— breq

এছাড়াও আপনি ক্লাসের মতো সেট না করেই সিলেক্ট অপশনগুলির মাধ্যমে মান পেতে পারেন var id = document.getElementById('personlist').value। আমি বিভিন্ন উত্তরে ব্যবহার করেছি, যাইহোক ধন্যবাদ!

— আল্পার

Answer 2

নির্বাচন বাক্স পরিচালনা করার জন্য খাঁটি জাভাস্ক্রিপ্ট কোড হিসাবে সরঞ্জামগুলি:

গ্রাফিকাল বোঝাপড়া:

চিত্র - এ

---

চিত্র - খ

---

চিত্র - সি

আপডেট - 25-জুন -2018 | ফিডলার ডেমো

জাভাস্ক্রিপ্ট কোড:

/**
 * 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 / পৃষ্ঠায় ফলাফল পাওয়া যায় নি :-(

— জেনকি

প্রশ্নটি হল "আমি জাভাস্ক্রিপ্ট ব্যবহার করে কোনও এইচটিএমএল নির্বাচিত বিকল্পটি কীভাবে পরিবর্তন করব?"। আপনি কোনও কিছুর উত্তর না দিয়ে কেবল একটি টুকরো কোড অনুলিপি / অনুলিপি করুন।

— থমাস

Answer 3

আমি বিশ্বাস করি যে ব্লগটি জাভাস্ক্রিপ্টের শুরুতে পোস্ট করে - মান অনুসারে একটি ড্রপডাউন বিকল্পটি আপনাকে সহায়তা করে help

<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

আপনি এইভাবে সিলেক্ট.ওশন.সलेक्ट করা ইনডেক্স ডম বৈশিষ্ট্য পরিবর্তন করতে পারেন:

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

সবাই কেন এটিকে ভোট দেয়নি, এটি কি নতুন বৈশিষ্ট্য? আমার কেবল সাম্প্রতিক ব্রাউজারগুলিকে সমর্থন করা দরকার যদিও এটি যেভাবেই চলছে।

— এন্টন্ট

Answer 6

আপনি জিকুয়ারিও ব্যবহার করতে পারেন

$(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

আমি মনে করি যে প্রশ্নটি ছিল "আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল নির্বাচিত বিকল্পটি পরিবর্তন করব?"

— মংগো

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>