javascript - আপনি কিভাবে একটি নির্বাচিত বক্সের সমস্ত বিকল্পগুলি সরাবেন এবং তারপরে একটি বিকল্প যুক্ত করুন এবং jQuery এর সাথে এটি নির্বাচন করবেন?





option html-select (18)


আমি নিচের মত নেট কিছু খুঁজে পেয়েছি। আমার পরিস্থিতির মতো হাজার হাজার বিকল্পের সাথে .empty() বা .find().remove() থেকে অনেক বেশি দ্রুত।

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

here আরো তথ্য।

কোর jQuery ব্যবহার করে, আপনি কিভাবে একটি নির্বাচিত বক্সের সমস্ত বিকল্পগুলি সরাবেন, তারপরে একটি বিকল্প যোগ করুন এবং এটি নির্বাচন করুন?

আমার নির্বাচন বক্স নিম্নলিখিত।

<Select id="mySelect" size="9" </Select>

সম্পাদনা করুন: নিম্নলিখিত কোড চেইন সঙ্গে সহায়ক ছিল। যাইহোক, (ইন্টারনেট এক্সপ্লোরারে) .val('whatever') না .val('whatever') যোগ করা হয়েছে বিকল্পটি নির্বাচন করে নি। (আমি একই 'মান' ব্যবহার করেছি .append এবং .append ।)

$('#mySelect').find('option').remove().end().append('<option value="whatever">text</option>').val('whatever');

সম্পাদনা করুন: এই কোডটি অনুকরণ করার জন্য এটি চেষ্টা করার সময়, যখনই পৃষ্ঠা / ফর্মটি পুনরায় সেট হয় তখন আমি নিম্নলিখিত কোডটি ব্যবহার করি। এই নির্বাচন বাক্সটি রেডিও বোতামগুলির একটি সেট দ্বারা জনবহুল। .focus() কাছাকাছি ছিল, কিন্তু বিকল্পটি পছন্দ করে না বলে নির্বাচিত হয়েছে। নির্বাচিত .selected= "true" । আমার বিদ্যমান কোডের সাথে কিছুই ভুল নয় - আমি শুধু jQuery শিখতে চেষ্টা করছি।

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

সম্পাদনা করুন: নির্বাচিত উত্তরটি আমার যা দরকার তার কাছাকাছি ছিল। এটা আমার জন্য কাজ করেছে:

$('#mySelect').children().remove().end().append('<option selected value="whatever">text</option>') ;

কিন্তু উভয় উত্তর আমাকে আমার চূড়ান্ত সমাধান নেতৃত্বে ..




  • একটি বস্তুর মধ্যে যোগ করা বিকল্প মান সংরক্ষণ করুন
  • নির্বাচন ট্যাগ বিদ্যমান বিকল্প সাফ করুন
  • তালিকা বস্তু পুনরাবৃত্তি এবং উদ্দেশ্যে নির্বাচিত ট্যাগ বিষয়বস্তু যোগ করুন

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

$('#selectID').empty();

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>




var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');



আপনি সহজেই এইচটিএমএল প্রতিস্থাপন করতে পারেন

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');



অন্য উপায়:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

এই লিঙ্কে, ভাল পদ্ধতি রয়েছে https://api.jquery.com/select/




আপনি "একটি যোগ করুন এবং এটি নির্বাচন করুন" এর দ্বারা কী বোঝাতে চান তা ঠিক না নিশ্চিত, যেহেতু এটি ডিফল্টভাবেই নির্বাচন করা হবে। কিন্তু, যদি আপনি একাধিক যোগ করতে চান তবে এটি আরো অর্থপূর্ণ হবে। কিভাবে ভালো কিছু সম্পর্কে:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

"সম্পাদনা করুন" এর প্রতিক্রিয়া : "এই নির্বাচন বাক্সটি রেডিও বোতামগুলির একটি সেট দ্বারা জনসংখ্যাযুক্ত" এর দ্বারা আপনি কী বোঝাতে চান তা ব্যাখ্যা করতে পারেন? একটি <নির্বাচন> উপাদান (আইনত) থাকতে পারে না <ইনপুট টাইপ = "রেডিও"> উপাদান।




কিভাবে শুধু নতুন তথ্য এইচটিএমএল পরিবর্তন সম্পর্কে।

$('#mySelect').html('<option value="whatever">text</option>');

আরেকটি উদাহরণ:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');



এটা কাজ করবে আশা করি

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));



এটি আপনার বিদ্যমান আমার প্রতিস্থাপন প্রতিস্থাপিত একটি নতুন আমার সাথে নির্বাচন করুন।

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');



আমি পেয়েছি উত্তর ধন্যবাদ, আমি নিম্নলিখিত মত কিছু তৈরি করতে সক্ষম ছিল, যা আমার প্রয়োজন অনুসারে। আমার প্রশ্ন কিছুটা দ্বিধান্বিত ছিল। অনুসরণ করার জন্য ধন্যবাদ। আমার চূড়ান্ত সমস্যাটি আমি পছন্দ করতে চাইলে "নির্বাচিত" সহ সমাধান করা হয়েছিল।

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>




  1. প্রথমে এক্সিকিউট করার বিকল্পটি প্রথমটি পরিষ্কার করুন প্রথমটি নির্বাচন করুন (- নির্বাচন করুন)

  2. এক দ্বারা লুপ এক ব্যবহার করে নতুন বিকল্প মান যোগ করুন

    $('#ddlCustomer').find('option:not(:first)').remove();
    for (var i = 0; i < oResult.length; i++) {
       $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
    }



$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;



$("#control").html("<option selected=\"selected\">The Option...</option>");



আই 7 তে আমার একটি বাগ ছিল (IE6 এ সূক্ষ্ম কাজ করে) যেখানে উপরের jQuery পদ্ধতিগুলি ব্যবহার করে DOM এ নির্বাচনটি মুছে ফেলা হবে তবে পর্দায় নয়। IE বিকাশকারী টুলবার ব্যবহার করে আমি নিশ্চিত করতে পারি যে নির্বাচনটি সাফ করা হয়েছে এবং নতুন আইটেমগুলি ছিল, তবে দৃশ্যত নির্বাচনগুলি এখনও পুরানো আইটেমগুলি দেখিয়েছে - যদিও আপনি সেগুলিকে নির্বাচন করতে পারবেন না।

ফিক্সটি ডিওএম পদ্ধতি / যথাযথ (যেমন পোস্টার মূল ছিল) ব্যবহার করে jQuery এর পরিবর্তে সাফ করতে হয় - এখনও বিকল্প যোগ করার জন্য jQuery ব্যবহার করে।

$('#mySelect')[0].options.length = 0;



নির্বাচিত অপশনটি সাফ করতে jquery prop() ব্যবহার করে

$('#mySelect option:selected').prop('selected', false);



মুর্ত্তোর উত্তরের উপর বিল্ডিং, এটি পড়ার এবং বুঝতে একটু সহজ:

$('#mySelect').find('option').not(':first').remove();

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

$('#mySelect').find('option').not('[value=123]').remove();

বিকল্প যোগ করা হবে যদি এই ভাল হবে।




$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

কোডের প্রথম লাইন কোনও নির্বাচন বাক্সের সমস্ত বিকল্প মুছে ফেলবে কারণ কোনও বিকল্পের মানদণ্ড উল্লেখ করা হয়নি।

কোডের দ্বিতীয় লাইন নির্দিষ্ট মান ("testValue") এবং পাঠ্য ("TestText") সহ বিকল্প যোগ করবে।




ভাইবোন ক্ষেত্রে

<a class="uibutton confirm addClient" href="javascript:void(0);">ADD Client</a>
<input type="text" placeholder="Enter client name" style="margin: 5px;float: right" class="clientsearch large" />
<select class="mychzn-select clientList">
  <option value="">Select Client name....</option>
  <option value="1">abc</option>
</select>


 /*jQuery*/
 $(this).siblings('select').children(':selected').text()




javascript jquery option html-select