තෝරාගත් කොටුවක ඇති සියලුම විකල්ප ඉවත් කර එක් විකල්පයක් එකතු කර jQuery සමඟ එය තෝරා ගන්නේ කෙසේද?

මූලික jQuery භාවිතා කරමින්, ඔබ තෝරාගත් කොටුවක ඇති සියලුම විකල්ප ඉවත් කරන්නේ කෙසේද, ඉන්පසු එක් විකල්පයක් එකතු කර එය තෝරා ගන්නේ කෙසේද?

මගේ තෝරාගත් කොටුව පහත දැක්වේ.

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

සංස්කරණය කරන්න: දම්වැල් දැමීම සඳහා පහත කේතය ප්‍රයෝජනවත් විය. කෙසේ වෙතත්, (ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හි) .val('whatever')එකතු කළ විකල්පය තෝරාගෙන නැත. (මම යන දෙකම එකම 'වටිනාකම' භාවිතා කළ .appendසහ .val.)

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

නමුත් පිළිතුරු දෙකම මගේ අවසාන විසඳුමට මග පෑදීය ..

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

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

සරල ජාවාස්ක්‍රිප්ට් භාවිතා නොකරන්නේ ඇයි?

document.getElementById("selectID").options.length = 0;

ඔබේ ඉලක්කය නම් පළමු විකල්පය හැර සෙසු විකල්පයන් තේරීමෙන් ඉවත් කිරීමයි (සාමාන්‍යයෙන් 'කරුණාකර අයිතමයක් තෝරන්න' විකල්පය) ඔබට භාවිතා කළ හැකිය:

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

මට IE7 හි දෝෂයක් තිබුණි (IE6 හි හොඳින් ක්‍රියා කරයි) ඉහත jQuery ක්‍රම භාවිතා කිරීමෙන් DOM හි තේරීම ඉවත් වනු ඇති නමුත් තිරය මත නොවේ. IE සංවර්ධක මෙවලම් තීරුව භාවිතා කිරීමෙන් තේරීම ඉවත් කර ඇති බවත් නව අයිතම ඇති බවත් මට තහවුරු කළ හැකි නමුත් දෘශ්‍යමය වශයෙන් තේරීම තවමත් පැරණි අයිතම පෙන්වයි - ඔබට ඒවා තෝරා ගැනීමට නොහැකි වුවද.

විසඳුම වූයේ jQuery වෙනුවට ඉවත් කිරීම සඳහා සම්මත DOM ක්‍රම / නිසි පරිදි (පෝස්ටරයේ මුල් පිටපත) භාවිතා කිරීමයි - විකල්ප එකතු කිරීමට තවමත් jQuery භාවිතා කරයි.

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

"එකක් එකතු කර එය තෝරන්න" යන්නෙන් ඔබ අදහස් කරන්නේ කුමක්දැයි හරියටම විශ්වාස නැත, මන්ද එය කෙසේ හෝ පෙරනිමියෙන් තෝරා ගනු ඇත. එහෙත්, ඔබ එකකට වඩා එකතු කළහොත් එය වඩාත් අර්ථවත් වනු ඇත. වැනි දෙයක් ගැන:

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

"සංස්කරණය කරන්න" සඳහා ප්‍රතිචාරය : "මෙම තෝරාගත් කොටුව ජනාවාස වී ඇත්තේ රේඩියෝ බොත්තම් සමූහයක්" යන්නෙන් ඔබ අදහස් කරන්නේ කුමක්ද යන්න පැහැදිලි කළ හැකිද? ඒ <select>මූලද්රව්යය (නීත්යානුකූලව) අඩංගු විය නොහැක <input type="radio">අංග.

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

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

මට ලැබුණු පිළිතුරු වලට ස්තූතියි, මගේ අවශ්‍යතාවන්ට ගැලපෙන පහත සඳහන් දෑ නිර්මාණය කිරීමට මට හැකි විය. මගේ ප්‍රශ්නය තරමක් අපැහැදිලි විය. පසු විපරමට ස්තූතියි. මගේ අවසාන ගැටළුව විසඳනු ලැබුවේ මට තෝරා ගැනීමට අවශ්‍ය විකල්පයට “තෝරාගත්” ඇතුළත් කිරීමෙනි.

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

Html නව දත්ත වලට වෙනස් කිරීම ගැන.

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

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

මම පහත වැනි දෙයක් අන්තර්ජාලයේ සොයාගෙන ඇත. මගේ තත්වය වගේ විකල්ප දහස් ගණනක් සමඟ මෙම ගොඩක් වේගවත් වඩා .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;
}

වැඩි විස්තර මෙහි .

වෙනත් ක්රමයක්:

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

මෙම සබැඳිය යටතේ, හොඳ පුරුදු https://api.jquery.com/select/

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

කේතයේ පළමු පේළියේ තෝරාගත් කොටුවක ඇති සියලුම විකල්ප ඉවත් කරනු ඇත.

කේතයේ දෙවන පේළිය නිශ්චිත අගය ("testValue") සහ පෙළ ("TestText") සමඟ විකල්පය එක් කරයි.

මොරෙටෝගේ පිළිතුර මත පදනම්ව, මෙය කියවීමට සහ තේරුම් ගැනීමට ටිකක් පහසු ය:

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

නිශ්චිත අගයක් ඇති එකක් හැර අනෙක් සියලුම විකල්ප ඉවත් කිරීමට, ඔබට මෙය භාවිතා කළ හැකිය:

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

එකතු කිරීමේ විකල්පය දැනටමත් තිබේ නම් මෙය වඩා හොඳය.

තෝරාගත් ටැගයෙන් සියලු විකල්ප ඉවත් කිරීමට එක් පේළියක් පමණක් ඇති අතර ඔබට ඕනෑම විකල්පයක් එකතු කළ පසු විකල්ප එකතු කිරීමට දෙවන පේළියක් සාදන්න.

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

තෝරාගත් විකල්පය ඉවත් කිරීම සඳහා jquery prop () භාවිතා කරයි

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

මෙය ඔබගේ පවතින mySelect නව mySelect සමඟ ප්‍රතිස්ථාපනය කරනු ඇත.

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

Html ආදේශ කිරීමෙන් ඔබට සරලව කළ හැකිය

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

• වස්තුවක එකතු කළ යුතු විකල්ප අගයන් සුරකින්න
• තෝරාගත් ටැගය තුළ පවතින විකල්ප ඉවත් කරන්න
• ලැයිස්තු වස්තුව නැවත සැකසීමට සහ අපේක්ෂිත තෝරාගත් ටැගයට අන්තර්ගතය එකතු කරන්න

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>

මම මෙම කේතය Select2 - Clearing Selections හි දුටුවෙමි

$('#mySelect').val(null).trigger('change');

Select2 නොමැතිව වුවද මෙම කේතය jQuery සමඟ හොඳින් ක්‍රියා කරයි

එය ක්‍රියාත්මක වේ යැයි සිතමි

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

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.innerHTML = `<option selected value="whatever">text</option>`

function setOne() {
  console.log({mySelect});
  mySelect.innerHTML = `<option selected value="whatever">text</option>`;
}

<button onclick="setOne()" >set one</button>
<Select id="mySelect" size="9"> 
 <option value="1">old1</option>
 <option value="2">old2</option>
 <option value="3">old3</option>
</Select>