අගය අනුව තෝරාගත් විකල්පය 'තෝරාගත්' ලෙස සකසන්න

මට එහි selectවිකල්ප කිහිපයක් සහිත ක්ෂේත්‍රයක් ඇත. දැන් මට optionsjQuery ඇති අයගෙන් එකක් තෝරා ගැනීමට අවශ්‍යයි . නමුත් තෝරා ගත යුතු දේ පමණක් මා දන්නා විට valueඑය optionකරන්නේ කෙසේද?

මට පහත HTML ඇත:

<div class="id_100">
  <select>
    <option value="val1">Val 1</option>
    <option value="val2">Val 2</option>
    <option value="val3">Val 3</option>
  </select>
</div>

මට අගය සහිත විකල්පය තෝරා ගැනීමට අවශ්‍යයි val2. මෙය කළ හැක්කේ කෙසේද?

මෙන්න ආදර්ශන පිටුවක්: http://jsfiddle.net/9Stxb/

විකල්ප ටැගයට යාමට ඔබට අවශ්‍ය නොවන පහසු ක්‍රමයක් තිබේ:

$("div.id_100 select").val("val2");

මෙම jQuery ක්‍රමය බලන්න .

'Val2' අගය සහිත විකල්පයක් තෝරා ගැනීමට:

$('.id_100 option[value=val2]').attr('selected','selected');

change()අගය තේරීමෙන් පසු සිද්ධිය භාවිතා කරන්න . ලියකියවිලි වලින්:

අන්තර්ගතය වෙනස් නොවී ක්ෂේත්‍රයේ අවධානය නැති වුවහොත්, සිදුවීම අවුලුවනු නොලැබේ. සිදුවීම අතින් ක්‍රියාත්මක කිරීමට, .change()තර්ක නොමැතිව අයදුම් කරන්න :

$("#select_id").val("val2").change();

වැඩි විස්තර .change () හි ඇත.

පළමුව සියල්ල තෝරා නොගෙන තෝරා ගත හැකි විකල්ප පෙරහන් කරන්න:

$('.id_100 option')
     .removeAttr('selected')
     .filter('[value=val1]')
         .attr('selected', true)

<select name="contribution_status_id" id="contribution_status_id" class="form-select">
    <option value="1">Completed</option>
    <option value="2">Pending</option>
    <option value="3">Cancelled</option>
    <option value="4">Failed</option>
    <option value="5">In Progress</option>
    <option value="6">Overdue</option>
    <option value="7">Refunded</option>

අගය අනුව අපේක්ෂිත තත්වයට සැකසීම

   $('#contribution_status_id').val("2");

මට නම් පහත දැක්වෙන්නේ එම කාර්යයයි

$("div.id_100").val("val2").change();

මම හිතන්නේ පහසුම ක්‍රමය වන්නේ val () සැකසීම තෝරා ගැනීමයි, නමුත් ඔබට පහත සඳහන් දෑ පරීක්ෂා කළ හැකිය. JQuery හි තෝරාගත් සහ විකල්ප ටැගය හැසිරවිය යුතු ආකාරය බලන්න. විකල්ප පිළිබඳ වැඩි විස්තර සඳහා.

$('div.id_100  option[value="val2"]').prop("selected", true);

$('id_100').val('val2');

ප්‍රශස්තිකරණය කර නැත, නමුත් පහත දැක්වෙන තර්කනය සමහර අවස්ථාවලදී ප්‍රයෝජනවත් වේ.

$('.id_100 option').each(function() {
    if($(this).val() == 'val2') {
        $(this).prop("selected", true);
    }
});

හොඳම ක්‍රමය මේ වගේ ය:

$(`#YourSelect option[value='${YourValue}']`).prop('selected', true);

ගුණාංග තේරීම භාවිතා කිරීමෙන් ඔබට ඕනෑම ගුණාංගයක් සහ එහි වටිනාකම තෝරා ගත හැකිය [attributename=optionalvalue], එබැවින් ඔබේ නඩුවේදී ඔබට විකල්පය තෝරාගෙන තෝරාගත් ගුණාංගය සැකසිය හැකිය.

$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);

valueඔබ තෝරා ගැනීමට කැමති වටිනාකම කොහෙන්ද?

ඔබට කලින් තෝරාගත් අගයන් ඉවත් කිරීමට අවශ්‍ය නම්, මෙය කිහිප වතාවක් භාවිතා කරන්නේ නම්, තෝරාගත් ගුණාංගය මුලින්ම ඉවත් කිරීම සඳහා ඔබට එය තරමක් වෙනස් කළ යුතුය.

$("div.id_100 option:selected").prop("selected",false);
$("div.id_100 option[value=" + value + "]")
        .prop("selected",true);

සරල පිළිතුරක් නම්, html හිදී

<select name="ukuran" id="idUkuran">
    <option value="1000">pilih ukuran</option>
    <option value="11">M</option>
    <option value="12">L</option>
    <option value="13">XL</option>
</select>

jquery මත, පහත ක්‍රියාකාරීත්වය බොත්තම හෝ වෙනත් ඕනෑම දෙයක් අමතන්න

$('#idUkuran').val(11).change();

එය සරල හා 100% ක් වැඩ කරයි, එය මගේ වැඩ වලින් ලබා ගත් ඒවා වේ ... :) එහි උපකාරය බලාපොරොත්තු වේ ..

මෙය අධිතක්සේරු කිරීමට හේතුවක් නැත, ඔබ කරන්නේ දේපලකට ප්‍රවේශ වීම සහ සැකසීම පමණි. ඒක තමයි.

හරි, ඒ නිසා මූලික ඩොම් කිහිපයක්: ඔබ මෙය කෙළින්ම ජාවාස්ක්‍රිප්ට් වලින් කළා නම්, ඔබ මෙය කරන්නේ:

window.document.getElementById('my_stuff').selectedIndex = 4;

නමුත් ඔබ එය කරන්නේ ජාවාස්ක්‍රිප්ට් සමඟ නොවේ, ඔබ එය කරන්නේ jQuery සමඟ ය. JQuery හි, ඔබට දේපළක් සැකසීමට .prop () ශ්‍රිතය භාවිතා කිරීමට අවශ්‍යය, එබැවින් ඔබ එය එසේ කරනු ඇත:

$("#my_stuff").prop('selectedIndex', 4);

කෙසේ වෙතත්, ඔබගේ හැඳුනුම්පත අද්විතීය බවට වග බලා ගන්න. එසේ නොමැතිනම්, මෙය ක්‍රියාත්මක නොවන්නේ මන්දැයි ඔබ කල්පනා කරමින් බිත්තියේ හිස ගසා දමනු ඇත.

එය කිරීමට ඇති පහසුම ක්‍රමය නම්:

HTML

<select name="dept">
   <option value="">Which department does this doctor belong to?</option>
   <option value="1">Orthopaedics</option>
   <option value="2">Pathology</option>
   <option value="3">ENT</option>
</select>

jQuery

$('select[name="dept"]').val('3');

ප්‍රතිදානය: මෙය ENT සක්‍රීය කරයි .

change()තෝරාගත් අගය සැකසීමෙන් පසු භාවිතා කිරීම වඩා හොඳය .

$("div.id_100 select").val("val2").change();

මෙය කිරීමෙන්, කේතය පරිශීලකයා විසින් තෝරා ගැනීම වෙනස් කිරීමට ආසන්න වනු ඇත, පැහැදිලි කිරීම JS Fiddle හි ඇතුළත් වේ :

ජේ.එස්

$('#graphtype option[value=""]').prop("selected", true);

#graphtypeතෝරාගත් ටැගයේ හැඳුනුම්පත කොතැනද යන්න මෙය හොඳින් ක්‍රියාත්මක වේ .

උදාහරණයක් ලෙස ටැගය තෝරන්න:

 <select name="site" id="site" class="form-control" onchange="getgraph1(this.options[this.selectedIndex].value);">
    <option value="" selected>Site</option> 
    <option value="sitea">SiteA</option>
    <option value="siteb">SiteB</option>
  </select>

var opt = new Option(name, id);
$("#selectboxName").append(opt);
opt.setAttribute("selected","selected");

භාවිත:

$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);

මෙය මට වැඩ කරයි. මම මෙම කේතය භාවිතා කරන්නේ ෆැන්සි බොක්ස් යාවත්කාලීන ආකෘතියක අගයක් විග්‍රහ කිරීම සඳහා වන අතර app.js වෙතින් මගේ සම්පූර්ණ ප්‍රභවය වන්නේ:

jQuery(".fancybox-btn-upd").click(function(){
    var ebid = jQuery(this).val();

    jQuery.ajax({
        type: "POST",
        url: js_base_url+"manajemen_cms/get_ebook_data",
        data: {ebookid:ebid},
        success: function(transport){
            var re = jQuery.parseJSON(transport);
            jQuery("#upd-kategori option[value="+re['kategori']+"]").attr('selected',true);
            document.getElementById("upd-nama").setAttribute('value',re['judul']);
            document.getElementById("upd-penerbit").setAttribute('value',re['penerbit']);
            document.getElementById("upd-tahun").setAttribute('value',re['terbit']);
            document.getElementById("upd-halaman").setAttribute('value',re['halaman']);
            document.getElementById("upd-bahasa").setAttribute('value',re['bahasa']);

            var content = jQuery("#fancybox-form-upd").html();
            jQuery.fancybox({
                type: 'ajax',
                prevEffect: 'none',
                nextEffect: 'none',
                closeBtn: true,
                content: content,
                helpers: {
                    title: {
                        type: 'inside'
                    }
                }
            });
        }
    });
});

මගේ PHP කේතය:

function get_ebook_data()
{
    $ebkid = $this->input->post('ebookid');
    $rs = $this->mod_manajemen->get_ebook_detail($ebkid);
    $hasil['id'] = $ebkid;
    foreach ($rs as $row) {
        $hasil['judul'] = $row->ebook_judul;
        $hasil['kategori'] = $row->ebook_cat_id;
        $hasil['penerbit'] = $row->ebook_penerbit;
        $hasil['terbit'] = $row->ebook_terbit;
        $hasil['halaman'] = $row->ebook_halaman;
        $hasil['bahasa'] = $row->ebook_bahasa;
        $hasil['format'] = $row->ebook_format;
    }
    $this->output->set_output(json_encode($hasil));
}

.attr () සමහර විට පැරණි jQuery අනුවාද වල ක්‍රියා නොකරයි, නමුත් ඔබට .prop () භාවිතා කළ හැකිය .

$('select#ddlCountry option').each(function () {
    if ($(this).text().toLowerCase() == co.toLowerCase()) {
        $(this).prop('selected','selected');
        return;
    }
});

මූලාශ්‍ර සබැඳිය

DropDown හි තනි සහ බහු අගය තෝරා ගැනීම සඳහා val () jQuery ක්‍රමය භාවිතා කරන්න

    $(function () {

        $("button").click(function () {
            $("#myDropDownSingle").val('5');
            $("#myDropDownMultiple").val(['5', '4', '8']);
        });

    });

HTML

<p>
    <h5>Single Selection</h5>
    <select id="myDropDownSingle" class="form-control">
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>
<p>
    <h5>Multiple Selection</h5>
    <select id="myDropDownMultiple" class="form-control" multiple>
        <option value="0">Select Value 0</option>
        <option value="8">Option value 8</option>
        <option value="5">Option value 5</option>
        <option value="4">Option value 4</option>
    </select>
</p>

<p>
    <button>Get Value and Text on Button Click</button>
</p>

තේරීම් පාලනය සඳහා මෙය නිසැකවම ක්‍රියාත්මක වේ :

$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
    this.selected = true;
    return;
} });

මෙම කේතය ඇතුලත් කරන්න:

$("#Controls_ID").val(value);

මේක උත්සාහ කරන්න. සරල නමුත් effective ලදායී javaScript + jQuery මාරාන්තික සංයෝජනය.

තෝරන්න සංයුක්ත:

<select id="YourSelectComponentID">
            <option value="0">Apple</option>
            <option value="2">Banana</option>
            <option value="3">Cat</option>
            <option value="4">Dolphin</option>
</select>

තෝරා ගැනීම:

document.getElementById("YourSelectComponentID").value = 4;

දැන් ඔබේ විකල්පය 4 තෝරා ගනු ඇත. පෙරනිමියෙන් ආරම්භයේ අගයන් තේරීමට ඔබට මෙය කළ හැකිය.

$(function(){
   document.getElementById("YourSelectComponentID").value = 4;
});

නැතහොත් සරල ශ්‍රිතයක් සාදන්න එය තුළ රේඛාව තබා විකල්පය තේරීමට anyEvent හි ශ්‍රිතය අමතන්න

JQuery + javaScript මිශ්‍රණයක් මැජික් කරයි ....

පරණ පෝස්ට් එකක් නමුත් jQuery ප්ලගිනය මෙන් ක්‍රියා කරන එක් සරල කාර්යයක් මෙන්න.

    $.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };

ඔබට සරල අයට මේ වගේ දෙයක් කළ හැකිය:

$('.id_100').selectOption('val2');

රෙසොන් මෙය භාවිතා කරන්නේ ඇයි ඔබ තෝරාගත් උපස්ථායකයා DOM බවට හරස් බ්‍රව්සරයට සහය දක්වන දේ වෙනස් කරන අතර ඔබට එය අල්ලා ගත හැකි වෙනසක් ඇති කරයි.

යනු මූලික මිනිස් ක්‍රියාකාරී අනුකරණයකි.

එය මට වැඩ කරයි

$("#id_100").val("val2");

• ඔබට එය ගතිකව වෙනස් කිරීමට අවශ්‍ය අගය මතක තබා ගත යුතුය, ඔබේ HTML හි ඔබ අර්ථ දක්වන විකල්පයන්හි පවතින එකක් මෙන් විය යුතුය case sensative. ඔබට තෝරාගත් කොටුව ගතිකව පහත පරිදි වෙනස් කළ හැකිය,

$("div#YOUR_ID").val(VALUE_CHANGED).change(); //value must present in options you selected otherwise it will not work

ඔබට මෙය විවිධ ක්‍රම මගින් සාක්ෂාත් කරගත හැකිය:
(මූලද්‍රව්‍යයක් ක්‍රියාත්මක කිරීමට නම් මතක තබා ගන්න, එහි මව් මූලද්‍රව්‍යය හැඳුනුම්පතක් හෝ පන්තියක් තිබීම වෙනුවට එයට හැඳුනුම්පතක් හෝ පන්තියක් ලබා දීම වඩා හොඳය).
මෙන්න, div එක තුළ ඇති තේරීම ඉලක්ක කර ගැනීමට පන්තියක් ඇති බැවින්, කේතය වනුයේ:

$("div.id_100 select").val("val2");

හෝ

$('div.id_100  option[value="val2"]').prop("selected", true);

පංතිය තෝරා ගැනීමට ලබා දුන්නේ නම්, කේතය වනුයේ:

$(".id_100").val("val2");

හෝ

$('.id_100 option[value=val2]').attr('selected','selected');

හෝ

$('.id_100 option')
    .removeAttr('selected')
    .filter('[value=val1]')
    .attr('selected', true);

අගය ගතිකව සම්මත කිරීම සඳහා, කේතය වනුයේ:
valu = "val2";

$("div.id_100 select").val(valu);
$("div.id_100 > select > option[value=" + valu + "]").prop("selected",true);

මූලද්‍රව්‍යය
අජැක්ස් හරහා එකතු කර ඇත්නම්, ඔබට ඔබේ මූලද්‍රව්‍යයට 'හැඳුනුම්පත' ලබා දිය යුතු අතර window.document.getElementById වෙනත් ආකාරයකින් ඔබට ඔබේ මූලද්‍රව්‍යයට 'පන්තිය' ලබා දී
window.document.getElementById භාවිතා කළ යුතුය.

තෝරාගත් මූලද්‍රව්‍යයේ දර්ශක අංකය අනුව ඔබට එය තෝරා ගත හැකිය.
ඔබ තෝරාගත් අංගයට හැඳුනුම්පත ලබා දී ඇත්නම්, කේතය වනුයේ:

window.document.getElementById('select_element').selectedIndex = 4;

ඉහත සඳහන් කළ පරිදි ඔබ තෝරාගත් අගය වෙනස් කළ විට මතක තබා ගන්න, වෙනස් කිරීමේ ක්‍රමය නොකියයි.
එනම්, ඔබ තෝරාගත් වෙනස් කිරීම සඳහා යම් යම් දේ කිරීමට ලිඛිත කේතයක් තිබේ නම් ඉහත ක්‍රම තෝරාගත් අගය වෙනස් කරනු ඇති නමුත් වෙනස අවුලුවන්නේ නැත.
වෙනස් කිරීමේ ශ්‍රිතය අවුලුවාලීමට ඔබ අවසානයේ .change () එකතු කළ යුතුය. එබැවින් කේතය වනුයේ:

$("#select_id").val("val2").change();

ස්ථිතික HTML පිටුවක සිටීම වෙනුවට පාලනයන් ගතිකව නිර්මාණය කරන විට තෝරාගත් පතන පාලනයන් ගතිකව වෙනස් නොවීම පිළිබඳ ගැටළුවක් ඇති බව පෙනේ.

JQuery හි මෙම විසඳුම මා වෙනුවෙන් වැඩ කළේය.

$('#editAddMake').val(result.data.make_id);
$('#editAddMake').selectmenu('refresh');

දෙවන පේළියකින් තොරව පළමු පේළියේ අතිරේකයක් ලෙස, ඇත්ත වශයෙන්ම එහි විනිවිදභාවයෙන් යුතුව ක්‍රියා කළා සේම, තෝරාගත් දර්ශකය ලබා ගැනීම දර්ශකය සැකසීමෙන් පසු නිවැරදි වන අතර ඔබ ඇත්ත වශයෙන්ම පාලනය ක්ලික් කළහොත් එය නිවැරදි අයිතමය පෙන්වනු ඇති නමුත් මෙය පිළිබිඹු නොවීය පාලනයේ ඉහළ ලේබලයේ.

මෙය උපකාරී වේ යැයි සිතමි.

වටිනාකම හැඳුනුම්පතක් සහ පෙළ කේතයක් වන විට මා මුහුණ දුන් ගැටලුවක්. කේතය භාවිතයෙන් ඔබට අගය සැකසිය නොහැක, නමුත් ඔබට හැඳුනුම්පතට access ජු ප්‍රවේශයක් නොමැත.

var value;

$("#selectorId > option").each(function () {
  if ("SOMECODE" === $(this).text()) {
    value = $(this).val();
  }
});

//Do work here

මෙය හොඳින් ක්‍රියාත්මක වේ

jQuery('.id_100').change(function(){ 
        var value = jQuery('.id_100').val(); //it gets you the value of selected option 
        console.log(value); // you can see your sected values in console, Eg 1,2,3
    });