আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে কোনও নির্বাচিত বাক্সের উপাদানটির মান সেট করতে পারি?

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

বিভিন্ন পদ্ধতির জন্য পারফরম্যান্সের তুলনার জন্য আমার উত্তরটি দেখুন

— তোসকান

Answer 1

আপনি এই ফাংশনটি ব্যবহার করতে পারেন:

selectElement('leaveCode', '11')

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

Comments

দুর্দান্ত উত্তর, বিকল্পগুলির মধ্যে লুপিংয়ের চেয়ে এটি সহজ। এবং এটি মানগুলির সাথে সম্মতিযুক্ত : dev.w3.org/html5/spec/… । যদি ব্রাউজারের অসুবিধাগুলি থাকে (অবশ্যই আছে :) আমি সেগুলি কী তা জানতে আগ্রহী হব। আপনি পিপিকে-তে সাধারণত এটি গণনা করেন তবে তিনি এই বিষয়টির জন্য আমার অনুসন্ধানগুলিতে অনড় হয়ে যেতে রাজি হন না।

— ফিলিও

এবং একাধিক নির্বাচন সম্পর্কে? এটি একাধিক বিকল্পের ক্ষেত্রে (কমপক্ষে Chrome 25-এ) কাজ করে বলে মনে হচ্ছে না।

— জর্জি Ivankin

@ রিং0 হিসাবে উল্লেখ করা হয়েছে যে, যখন ভ্যালুটোসলেকের উপস্থিতি নেই, এটি ক্রোমে একটি ফাঁকা প্রবেশ সন্নিবেশ করে। আইই এবং ফায়ারফক্স সর্বশেষ নির্বাচিত মান ধরে রাখে।

— কার্তিক বোস

আই-এর জন্য দ্রষ্টব্য: <বিকল্প> অবশ্যই একটি মান = 'valueToSelect' বৈশিষ্ট্য থাকতে হবে। আপনি <টুর্নামেন্ট .. </option> এর মধ্যে ডিসপ্লে পাঠ্যকে মান হিসাবে ব্যবহার করতে পারবেন না টোসলেক্ট

— পিটার

আপনার যদি পরিবর্তনের ইভেন্টটি বরখাস্ত করার দরকার হয় তবে element.dispatchEvent(new Event('change'));

— আপনারও

Answer 2

আপনি যদি jQuery ব্যবহার করে থাকেন তবে আপনি এটিগুলি করতে পারেন:

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

এটি <option>14 এর মান সহ নির্বাচন করবে ।

---

সরল জাভাস্ক্রিপ্টের সাহায্যে এটি দুটি Documentপদ্ধতিতেও অর্জন করা যেতে পারে :

• এর সাথে document.querySelector, আপনি সিএসএস নির্বাচকের উপর ভিত্তি করে একটি উপাদান নির্বাচন করতে পারেন:

  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

Doing ('# چھوڑি কোড') চালু করার জন্য কি কোনও উপায় আছে? ('পরিবর্তন', ফাংশন () তা করে?

— লাইউউইউ

$ ( "# leaveCode") Val ( "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

ShouldO formObj.leaveCode [i]। নির্বাচিত = সত্য; be formObj.options [i]। নির্বাচিত = সত্য; ?

— ডেভিড ক্রিস্টোফার রেনল্ডস

Answer 5

আমি বিভিন্ন পদ্ধতির তুলনা করেছি:

জেএস বা জ্যাকুয়েরির সাথে কোনও নির্বাচনের মান কীভাবে সেট করা যায় তার বিভিন্ন পদ্ধতির তুলনা

কোড:

$(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);
});

Select 4000 উপাদান সহ একটি নির্বাচনের আউটপুট:

• 1 এমএস
• 58 এমএস
• 612 এমএস

ফায়ারফক্স ১০ সহ। দ্রষ্টব্য: আমি এই পরীক্ষাটি করার একমাত্র কারণ ছিল, 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 ফর্মের বৈধতা বরখাস্ত করা হয়নি। যদিও সঠিক বিকল্পটি নির্বাচিত হয়েছিল (এবং ফর্মটিতে প্রদর্শিত হবে), ইনপুটটি অবৈধ রইল ( এনজি-প্রাইসটাইন এবং এনজি-অবৈধ শ্রেণি এখনও বিদ্যমান)।

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 গ্রন্থাগার দিয়ে কৌণিক আশেপাশে হ্যাক করতে হবে না :)

— সিডঅফসি

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>

(যেখানে কন্টাক্ট.এফপিটি আপনার নির্বাচিত বিকল্প সহ পৃষ্ঠাটি রয়েছে the পেজ ইউআরএলটি রয়েছে? নোটটি বিকল্প = 1 বা 2 নোট করুন)

2) আপনার দ্বিতীয় পৃষ্ঠায় এই কোডটি রাখুন (আমার ক্ষেত্রে যোগাযোগ.এফপি )

<?
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>

.. ইত্যাদি।
সুতরাং এটি ইউআরএল-তে জিইটি-এর মাধ্যমে অন্য পৃষ্ঠায় (নির্বাচন বিকল্প বিকল্পের তালিকা সহ) মানটি পাস করার একটি সহজ উপায়। কোনও ফর্ম নেই, কোনও আইডি নেই .. মাত্র 3 ধাপ এবং এটি নিখুঁতভাবে কাজ করে।

Answer 10

এলিমেন্টের আইডির জন্য একটি ভেরিয়েবল যুক্ত করে কেন এটি পুনরায় ব্যবহারযোগ্য ফাংশন হিসাবে তৈরি করবেন না?

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

Answer 11

মনে করুন আপনার ফর্মটির নাম ফর্ম 1 হয়েছে :

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

পিএইচপি ব্যবহার করে আপনি এই জাতীয় কিছু চেষ্টা করতে পারেন:

$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

এটি ধরে নিচ্ছে যে ওপি জিকুয়ারি যদিও ব্যবহার করছে

— ব্যারি মাইকেল ডয়েল

@ ব্যারিমিচালডোয়েল, যা নয়, কারণ এমনকি প্রশ্নের শিরোনামও শেষ হয়েছে using JavaScript।

— আইউলিয়ান ওনোফ্রেই

Answer 16

আমি আশঙ্কা করছি আমি এই মুহুর্তে এটি পরীক্ষা করতে অক্ষম, তবে অতীতে, আমি বিশ্বাস করি যে প্রতিটি বিকল্পের জন্য আমাকে একটি আইডি দিতে হয়েছিল, এবং তারপরে আমি এরকম কিছু করেছি:

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

যদি এটি কাজ না করে, সম্ভবত এটি আপনাকে একটি সমাধানের নিকটবর্তী করে তুলবে: পি

Comments

HTMLOptionElement একটি নেই select()পদ্ধতি (এটি সব এইচটিএমএল উপাদানে মানক সেট উপর কোন অতিরিক্ত পদ্ধতি নির্ধারণ করে না)। তবে আপনি selectedসম্পত্তিটিকে সত্য হিসাবে সেট করতে পারেন ।

— মিঃ হোয়েট