এইচটিএমএল সিলেক্ট উপাদানটির নির্বাচিত বিকল্পটি পরিবর্তন করা

148

আমার এইচটিএমএলে, আমার <select>সাথে তিনটি <option>উপাদান রয়েছে। আমি জাভাস্ক্রিপ্টের বিপরীতে প্রতিটি বিকল্পের মান পরীক্ষা করতে jQuery ব্যবহার করতে চাই var। যদি কোনওটি মিলে যায়, আমি সেই বিকল্পটির নির্বাচিত বৈশিষ্ট্যটি সেট করতে চাই। আমি যে কিভাবে করতে হবে?

javascript jquery html

— llihttocs
সূত্র

আপনার এইচটিএমএল পোস্ট করুন। তবে স্বাভাবিকভাবে:$('#myselectid').val()

— সামিচ

9

কেন তাকে নিম্নচেতন করা হয়েছিল তা নিশ্চিত নয়, তিনি একজন নতুন ব্যবহারকারী এবং প্রশ্নটি বৈধ বলে মনে হচ্ছে।

— ভোলআরন

323

ভ্যানিলা জাভাস্ক্রিপ্ট

সাধারণ পুরানো জাভাস্ক্রিপ্ট ব্যবহার:

var val = "Fish";
var sel = document.getElementById('sel');
document.getElementById('btn').onclick = function() {
  var opts = sel.options;
  for (var opt, j = 0; opt = opts[j]; j++) {
    if (opt.value == val) {
      sel.selectedIndex = j;
      break;
    }
  }
}

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

স্নিপেট প্রসারিত করুন

jQuery এর

তবে আপনি যদি সত্যিই jQuery ব্যবহার করতে চান:

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

কোড স্নিপেট দেখান

var val = 'Fish';
$('#btn').on('click', function() {
  $('#sel').val(val);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<button id="btn">Select Fish</button>

স্নিপেট প্রসারিত করুন

jQuery - মান বৈশিষ্ট্য ব্যবহার করে

যদি আপনার বিকল্পগুলির মান বৈশিষ্ট্য থাকে যা তাদের পাঠ্য সামগ্রী থেকে পৃথক হয় এবং আপনি পাঠ্য সামগ্রীর মাধ্যমে নির্বাচন করতে চান:

<select id="sel">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var val = 'Fish';
    $('#sel option:contains(' + val + ')').prop({selected: true});
</script>

ডেমো

তবে যদি আপনার উপরের সেট আপ থাকে এবং jQuery ব্যবহার করে মান দ্বারা নির্বাচন করতে চান, আপনি আগের মতো করতে পারেন:

var val = 3;
$('#sel').val(val);

আধুনিক ডিওএম

যে ব্রাউজারগুলি document.querySelectorএবং HTMLOptionElement::selectedসম্পত্তি সমর্থন করে তাদের জন্য, এই কাজটি সম্পাদন করার এটি একটি আরও সুসংগত উপায়:

var val = 3;    
document.querySelector('#sel [value="' + val + '"]').selected = true;

ডেমো

Knockout.js

<select data-bind="value: val">
    <option value="1">Cat</option>
    <option value="2">Dog</option>
    <option value="3">Fish</option>
</select>
<script>
    var viewModel = {
        val: ko.observable()
    };
    ko.applyBindings(viewModel);
    viewModel.val(3);
</script>

ডেমো

পলিমার

<template id="template" is="dom-bind">
    <select value="{{ val }}">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</template>
<script>
    template.val = 3;
</script>

ডেমো

কৌণিক ঘ

দ্রষ্টব্য: চূড়ান্ত স্থিতিশীল প্রকাশের জন্য এটি আপডেট করা হয়নি।

<app id="app">
    <select [value]="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</app>
<script>
    var App = ng.Component({selector: 'app'})
        .View({template: app.innerHTML})
        .Class({constructor:  function() {}});

    ng.bootstrap(App).then(function(app) {
        app._hostComponent.instance.val = 3;
    });
</script>

ডেমো

মান 2

<div id="app">
    <select v-model="val">
        <option value="1">Cat</option>
        <option value="2">Dog</option>
        <option value="3">Fish</option>
    </select>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
                val: null,
        },
        mounted: function() {
                this.val = 3;
        }
    });
</script>

ডেমো

— kzh
সূত্র

1

এটি বিশেষত দরকারী কারণ আমি নির্বাচিত বৈশিষ্ট্যটি কীভাবে সেট করবেন তা নিশ্চিত ছিল না। আমি বুঝতে পারিনি যে সেখানে একটি নির্বাচিত তালিকা রয়েছে। ধন্যবাদ।

— llihttocs

1

@aaalgoa jsperf.com/option-select-loop/2 আমি আপনার প্রথম স্নিপেটটি আমার কোডটিকে আরও নকল করতে সংশোধন করেছিলাম যা আমার ধীর করে তোলে। আমি প্রাক-ইনক্রিমেন্টের পরিবর্তে পোস্ট-ইনক্রিমেন্ট ব্যবহার করেছি এবং তারপরে আমি আরও একটি পরীক্ষা যুক্ত করেছি যা আপনার তৃতীয় পরীক্ষার চেয়ে কিছুটা দ্রুত।

— kzh

1

দু:

document.evaluate(".//select[@id='sel']/option[text()='Fish']", document.body, null, 9, null).singleNodeValue.selected = true;

— খের

1

এখন অবধি কি হবে?

— কেজেড

1

ভ্যানিলা জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করার জন্য আপনাকে ধন্যবাদ - আমরা যারা নিজেরাই

— পিটার কুলেন

24

এখানে jquery ব্যবহার করে উদাহরণগুলির মধ্যে কোনটিই আসলে সঠিক নয় কারণ মান পরিবর্তন করা হলেও তারা প্রথম এন্ট্রি প্রদর্শিত নির্বাচিতটিকে ছেড়ে দেবে।

আলাস্কা নির্বাচন করার সঠিক উপায় এবং নির্বাচনের সাহায্যে নির্বাচিত হিসাবে সঠিক আইটেমটি প্রদর্শন করুন:

<select id="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
</select>

Jquery সঙ্গে হবে:

$('#state').val('AK').change();

— জাস্টিন বুজার
সূত্র

19

আপনি নির্বাচিত উপাদানটির মান পরিবর্তন করতে পারেন, যা জাভাস্ক্রিপ্ট ব্যবহার করে নির্বাচিত বিকল্পটিকে সেই মানটির সাথে একটিতে পরিবর্তন করে:

document.getElementById('sel').value = 'bike';

ডেমো

— আইভিন রাজ
সূত্র

1

সময় দেওয়ার কারণে আপনার উদাহরণটি বেশ কার্যকর হয় না। ব্যবহারকারীর বোতামটি ক্লিক না হওয়া পর্যন্ত অপেক্ষা করার জন্য আমি এটি আপডেট করেছি: jsfiddle.net/xkqTR/3271

— dlaliberte

এটি নির্বাচনের উপাদানগুলিতে পরিবর্তন ঘটায় না। আপনার কি সমাধান আছে?

— 21:30

10

মার্কআপ

<select id="my_select">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>

jQuery এর

var my_value = 2;
$('#my_select option').each(function(){
    var $this = $(this); // cache this jQuery object to avoid overhead

    if ($this.val() == my_value) { // if this option's value is equal to our value
        $this.prop('selected', true); // select this option
        return false; // break the loop, no need to look further
    }
});

ডেমো

— Shef
সূত্র

আমি মনে করি এটি ঠিক আমার প্রয়োজন ছিল। আমি ইতিমধ্যে আপনার কোডের বিভিন্ন লাইন ব্যবহার করেছি এবং এটি কাজ করে বলে মনে হচ্ছে। দুর্দান্ত স্নিপেটের জন্য ধন্যবাদ।

— llihttocs

@ এলিহট্টোকস: খুশী হয়েছি আমি সহায়তা করেছি। উত্তরের দ্বিধায় বাম পাশে ভোটের গণনার নিচে খালি টিক ক্লিক করে যা আপনার সমস্যার সমাধান করে সেই উত্তরটি নির্দ্বিধায় গ্রহণ করুন। যাতে এই প্রশ্নটি সমাধান হিসাবে চিহ্নিত হয়েছে এবং অন্যরা যারা একই সমাধান খুঁজছেন তারা সহজেই উত্তরটি খুঁজে পাবে।

— শেফ

4

আমি নির্বাচিত উপাদানটির নির্বাচিত বিকল্পের মান এবং টেক্সট কনটেন্ট (আমরা কী দেখি) উভয়কে 'আম' এ পরিবর্তন করতে চাই।

কাজ করা সহজ কোডটি নীচে:

var newValue1 = 'Mango'

var selectElement = document.getElementById('myselectid');
selectElement.options[selectElement.selectedIndex].value = newValue1;
selectElement.options[selectElement.selectedIndex].textContent = newValue1;

আশা করি যে কাউকে সাহায্য করবে। ভাগ্য সুপ্রসন্ন হোক.
যদি এটি আপনাকে সহায়তা করে তবে ভোট আপ করুন।

— মনোহর রেড্ডি পোরেডি
সূত্র

2

এই ডেমো পরীক্ষা করুন

বিকল্পটির মান অনুসারে নির্বাচন করা

var vals = [2,'c'];

$('option').each(function(){
   var $t = $(this);

   for (var n=vals.length; n--; )
      if ($t.val() == vals[n]){
         $t.prop('selected', true);
         return;
      }
});

বিকল্পটির পাঠ্যের উপর ভিত্তি করে নির্বাচন করা

var vals = ['Two','CCC'];                   // what we're looking for is different

$('option').each(function(){
   var $t = $(this);

   for (var n=vals.length; n--; )
      if ($t.text() == vals[n]){            // method used is different
         $t.prop('selected', true);
         return;
      }
});

সমর্থনকারী এইচটিএমএল

<select>
   <option value=""></option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
</select>

<select>
   <option value=""></option>
   <option value="a">AAA</option>
   <option value="b">BBB</option>
   <option value="c">CCC</option>
</select>

— vol7ron
সূত্র

1

এই উদাহরণটি খুব দরকারী। আমি কীভাবে অপশনগুলির মাধ্যমে পুনরাবৃত্তি করব এবং নির্বাচিত বৈশিষ্ট্যটি সেট করব তা নিশ্চিত ছিলাম না। এই ধরনের একটি সম্পূর্ণ উত্তরের জন্য আপনাকে ধন্যবাদ।

— llihttocs

কোনও সমস্যা নেই, প্রশ্নগুলি / মন্তব্যগুলি আপনাকে সহায়ক বলে মনে করে তার পাশের উপরের তীরটি ক্লিক করতে ভুলবেন না। এবং আপনার চয়ন করা উত্তরের পাশে চেকমার্কটি নির্বাচন করুন। - আপনি যে কোনও ক্ষেত্রে

— ডাব্লু

1

দুর্দান্ত উত্তর - যে কেউ খুঁজছেন তার জন্য এখানে ডি 3 সংস্করণ রয়েছে:

<select id="sel">
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>
<script>
    d3.select('#sel').property('value', 'Fish');
</script>

— ত্রিস্তান রিড
সূত্র

1

আমি এখানে পোস্ট করা প্রায় সব উত্তরই ব্যবহার করেছি তবে তাতে স্বাচ্ছন্দ্যবোধ করছি না তাই আমি এক ধাপে আগাছা খনন করেছিলাম এবং এমন সহজ সমাধান খুঁজে পেয়েছি যা আমার প্রয়োজনের সাথে খাপ খায় এবং আপনাকে ছেলের সাথে ভাগ করে নেওয়ার যোগ্য মনে করে।
সমস্ত বিকল্পগুলির পুনরাবৃত্তির পরিবর্তে বা জ্যাকুয়ারি ব্যবহার করে আপনি সাধারণ পদক্ষেপগুলিতে মূল জেএস ব্যবহার করতে পারেন :

উদাহরণ

<select id="org_list">
  <option value="23">IBM</option>
  <option value="33">DELL</option>
  <option value="25">SONY</option>
  <option value="29">HP</option>
</select>

সুতরাং আপনাকে অবশ্যই নির্বাচনের বিকল্পটির মূল্য জানতে হবে।

function selectOrganization(id){
    org_list=document.getElementById('org_list');
    org_list.selectedIndex=org_list.querySelector('option[value="'+id+'"]').index;
}

ব্যবহারবিধি?

selectOrganization(25); //this will select SONY from option List

আপনার মন্তব্য স্বাগত। :) আজমতহুনজাই।

— আজমত করিম খান
সূত্র

1

অনেকগুলি অনুসন্ধানের পরে আমি @KZ চেষ্টা করেছি নির্বাচনী তালিকায় যেখানে কেবলমাত্র আমি জানি optionঅভ্যন্তরীণ পাঠ্যটি valueবৈশিষ্ট্যযুক্ত নয় , নির্বাচিত উত্তরের ভিত্তিতে এই কোডটি আমি urlএই ফর্ম্যাটের বর্তমান পৃষ্ঠা অনুসারে নির্বাচন বিকল্প পরিবর্তন করতে ব্যবহার করেছিhttp://www.example.com/index.php?u=Steve

<select id="sel">
    <option>Joe</option>
    <option>Steve</option>
    <option>Jack</option>
</select>
<script>
    var val = window.location.href.split('u=')[1]; // to filter ?u= query 
    var sel = document.getElementById('sel');
    var opts = sel.options;
    for(var opt, j = 0; opt = opts[j]; j++) {
        // search are based on text inside option Attr
        if(opt.text == val) {
            sel.selectedIndex = j;
            break;
        }
    }
</script>

urlএটি আরও ব্যবহারকারী বান্ধব করতে নির্বাচিত হিসাবে দেখানো প্যারামিটারগুলিকে রাখবে এবং দর্শনার্থী জানেন যে তিনি বর্তমানে কোন পৃষ্ঠা বা প্রোফাইলটি দেখছেন।

— সালেম
সূত্র

0

আমি একটি রেজিস্টার আপডেট করার পরে এটি ব্যবহার করেছি এবং এজ্যাক্সের মাধ্যমে অনুরোধের স্থিতি পরিবর্তন করেছি, তারপরে আমি একই স্ক্রিপ্টে নতুন রাষ্ট্রের সাথে একটি অনুসন্ধান করব এবং ভিউটি আপডেট করার জন্য এটি নির্বাচিত ট্যাগ উপাদান নতুন রাজ্যে রাখি।

var objSel = document.getElementById("selectObj");
objSel.selectedIndex = elementSelected;

আমি আশা করি এটি কার্যকর হবে।

— user7071893
সূত্র

-1

কিছুটা কম পরিচ্ছন্ন ভ্যানিলা.জেএস সংস্করণ। ধরে নিচ্ছি আপনি ইতিমধ্যে nodeListনিখোঁজ স্থির করেছেন .forEach():

NodeList.prototype.forEach = Array.prototype.forEach

শুধু:

var requiredValue = 'i-50332a31',   
  selectBox = document.querySelector('select')

selectBox.childNodes.forEach(function(element, index){
  if ( element.value === requiredValue ) {
    selectBox.selectedIndex = index
  }
})

— mikemaccana
সূত্র