මා දන්නා දන්නා අගයන් සහිත පතන ලැයිස්තුවක් ඇත. මම කරන්න උත්සාහ කරන්නේ පතන ලැයිස්තුව jQuery භාවිතයෙන් පවතින බව මා දන්නා විශේෂිත අගයකට සැකසීමයි . සාමාන්‍ය ජාවාස්ක්‍රිප්ට් භාවිතා කරමින් , මම මෙවැනි දෙයක් කරන්නෙමි:

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

කෙසේ වෙතත්, මට මෙය jQuery සමඟ කළ යුතුය , මන්ද මම මගේ තේරීම සඳහා CSS පන්තියක් භාවිතා කරමි (මෝඩ ASP.NET ග්‍රාහක අයිඩී ...).

මෙන්න මම උත්සාහ කළ කරුණු කිහිපයක්:

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

JQuery සමඟ එය කරන්නේ කෙසේද?

යාවත්කාලීන කරන්න

ඒ නිසා එය පළමු වරට මා සතුව තිබුනේ:

$("._statusDDL").val(2);

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

තෝරාගත් දේපල සැකසීමට නොහැකි විය. අවලංගු දර්ශකය

එය jQuery හෝ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 (මම අනුමාන කරන්නේ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 ) සහිත දෝෂයක් දැයි මට විශ්වාස නැත , නමුත් එය අතිශය කරදරකාරී ය.

jQuery හි ප්‍රලේඛනයේ මෙසේ සඳහන් වේ:

[jQuery.val] සියලුම රේඩියෝ බොත්තම්, පිරික්සුම් කොටු, සහ අගයන් සමූහයට ගැලපෙන විකල්ප තෝරා ගනී .

මෙම හැසිරීම jQueryඅනුවාදවල 1.2සහ ඊට ඉහළින් ඇත.

ඔබට බොහෝ විට මෙය අවශ්‍ය වේ:

$("._statusDDL").val('2');

සැඟවුණු ක්ෂේත්‍රය සමඟ ඔබ මේ ආකාරයට භාවිතා කළ යුතුය:

$("._statusDDL").val(2);
$("._statusDDL").change();

හෝ

$("._statusDDL").val(2).change();

FYI එකක් පමණක් වන අතර, මෙය සිදු කිරීම සඳහා ඔබ CSS පන්ති භාවිතා කිරීම අවශ්‍ය නොවේ.

සේවාදායකයාගේ නිවැරදි පාලන නම ලබා ගැනීම සඳහා ඔබට පහත කේත පේළිය ලිවිය හැකිය:

$("#<%= statusDDL.ClientID %>").val("2");

ASP.NET විසින් jQuery තුළ පාලක හැඳුනුම්පත නිවැරදිව සපයනු ඇත.

උත්සාහ කරන්න

$("._statusDDL").val("2");

සහ සමග නොවේ

$("._statusDDL").val(2);

මෙම විසඳුම් ඔබගේ පතන ලැයිස්තුවේ ඇති සෑම අයිතමයකම පතන ලැයිස්තුවේ ඒවායේ පිහිටීමට අදාළ අගය () අගයක් ඇති බව උපකල්පනය කරයි .

මෙය එසේ නොවේ නම් දේවල් ටිකක් සංකීර්ණ වේ.

කිරීමට කියවීමට ලැයිස්තුවේ පහලට බිඳුවක් අයත්, තෝරාගත් දර්ශකය, ඔබ විසින් මෙය භාවිතා වනු ඇත:

$("#dropDownList").prop("selectedIndex");

කිරීමට තබා ලැයිස්තුවේ පහලට බිඳුවක් අයත්, තෝරාගත් දර්ශකය, ඔබ විසින් මෙය භාවිතා වනු ඇත:

$("#dropDownList").prop("selectedIndex", 1);

මුක්කු () විශේෂාංගයට JQuery v1.6 හෝ ඊට පසුව අවශ්‍ය බව සලකන්න .

මෙම කාර්යයන් දෙක ඔබ භාවිතා කරන්නේ කෙසේදැයි බලමු.

ඔබට මාස නම් ලැයිස්තුවක් පහළට වැටී ඇතැයි සිතමු.

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

ඔබට "පෙර මාසය" සහ "ඊළඟ මාසය" බොත්තමක් එක් කළ හැකි අතර එය දැනට තෝරාගෙන ඇති පතන ලැයිස්තු අයිතමය දෙස බලා එය පෙර / ඊළඟ මාසයට වෙනස් කරයි:

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

මෙම බොත්තම් ක්‍රියාත්මක වන ජාවාස්ක්‍රිප්ට් මෙන්න:

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

JSON දත්ත සමඟ පතන ලැයිස්තුවක් ජනනය කරන්නේ කෙසේදැයි පෙන්වීමට මගේ වෙබ් අඩවිය ද ප්‍රයෝජනවත් වේ:

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

විසඳුම් කිහිපයක් බැලීමෙන් පසු, මෙය මට ප්‍රයෝජනවත් විය.

මා සතුව එක් පතන ලැයිස්තුවක් සමහර අගයන් ඇති අතර එම අගය වෙනත් පතන ලැයිස්තුවකින් තෝරා ගැනීමට මට අවශ්‍යය ... එබැවින් පළමුව මම selectIndexමගේ පළමු පතන ඩවුන් ඩවුන් එකේ විචල්‍යයක් තැබුවෙමි .

var indiceDatos = $('#myidddl')[0].selectedIndex;

ඉන්පසුව, මම මගේ දෙවන පතන ලැයිස්තුවේ එම දර්ශකය තෝරා ගනිමි.

$('#myidddl2')[0].selectedIndex = indiceDatos;

සටහන:

මම හිතන්නේ මෙය කෙටිම, විශ්වාසදායක, සාමාන්‍ය හා අලංකාර විසඳුමයි.

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

මෙය පැරණි ප්‍රශ්නයක් බව මම දනිමි. සමහර අවස්ථා හැර ඉහත විසඳුම් හොඳින් ක්‍රියාත්මක වේ.

මෙන්

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

එබැවින් 4 වන අයිතමය බ්‍රව්සරයේ "තෝරාගත්" ලෙස පෙන්වනු ඇති අතර දැන් ඔබට අවශ්‍ය වන්නේ අගය 3 ලෙස වෙනස් කර අයිතමය 4 වෙනුවට තෝරාගත් පරිදි "අයිතමය 3" පෙන්වන්න. ඉහත විසඳුම් අනුව ඔබ භාවිතා කරන්නේ නම්

jQuery("#select_selector").val(3);

අයිතමය 3 බ්‍රව්සරයේ තෝරාගෙන ඇති බව ඔබට පෙනෙනු ඇත.නමුත් ඔබ දත්ත php හෝ asp වලින් සකසන විට, තෝරාගත් අගය "4" ලෙස ඔබ සොයා ගනු ඇත. හේතුව, ඔබේ html මේ ආකාරයට පෙනෙනු ඇත.

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

එය අවසාන අගය "4" ලෙස පැති පැති භාෂාවෙන් ලබා ගනී.

මේ සම්බන්ධයෙන් මගේ අවසාන විසඳුම

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');  

සංස්කරණය කරන්න: "+ newselectedIndex +" වටා තනි උපුටා දැක්වීමක් එක් කරන්න, එවිට එකම ක්‍රියාකාරීත්වය සංඛ්‍යාත්මක නොවන අගයන් සඳහා භාවිතා කළ හැකිය.

ඉතින් මම කරන්නේ ඇත්ත වශයෙන්ම, තෝරාගත් ගුණාංගය ඉවත් කර නව එකක් තෝරාගත් ආකාරයට සාදන්න.

Programstrager, @ y0mbo, @ISIK වැනි ජ්‍යෙෂ් program ක්‍රමලේඛකයින්ගේ අදහස් මම අගය කරමි

අපට "දත්ත වර්ගීකරණය" යන මාතෘකාව සහිත පහත වැටීමක් තිබේ නම්:

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

අපට එය විචල්‍යයක් බවට පත් කළ හැකිය:

var dataClsField = $('select[title="Data Classification"]');

පහත වැටීම සඳහා අපට අවශ්‍ය අගය වෙනත් විචල්‍යයකට දමන්න:

var myValue = "Top Secret";  // this would have been "2" in your example

එවිට අපට ඇතුළත් කළ ක්ෂේත්‍රය භාවිතා කර dataClsField, සොයා ගැනීමක් myValueකර එය තෝරාගෙන එය භාවිතා කළ හැකිය .prop():

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

නැතහොත්, ඔබට භාවිතා කළ හැකිය .val(), නමුත් ඔබේ තේරීම භාවිතා .කළ හැක්කේ එය පතන පන්තියේ පන්තියකට ගැලපෙන්නේ නම් පමණක් වන අතර, ඔබ වරහන් තුළ ඇති අගය මත මිල ගණන් භාවිතා කළ යුතුය, නැතහොත් අප කලින් සැකසූ විචල්‍යය භාවිතා කරන්න:

dataClsField.val(myValue);

ඒ නිසා මම එය වෙනස් කළ නිසා දැන් එය සෙට් ටයිමූට් භාවිතයෙන් මිලි තත්පර 300 කට පසුව ක්‍රියාත්මක වේ. දැන් වැඩ කරන බවක් පෙනේ.

අජැක්ස් ඇමතුමකින් දත්ත පූරණය කිරීමේදී මම මෙය බොහෝ වාර ගණනක් ධාවනය කර ඇත්තෙමි. මමත් .NET භාවිතා කරන අතර, jQuery තේරීම භාවිතා කරන විට clientId සමඟ හැඩගැසීමට කාලය ගතවේ. ඔබට ඇති ගැටළුව නිවැරදි කිරීමට සහ setTimeoutදේපලක් එක් කිරීම වළක්වා ගැනීමට , ඔබට සරලවම " async: false" අජැක්ස් ඇමතුමෙහි තැබිය හැකි අතර, එමඟින් ඔබ තෝරාගත් දේට එකතු කරන වස්තූන් නැවත ලබා ගැනීමට DOM හට ප්‍රමාණවත් කාලයක් ලබා දෙනු ඇත. පහත කුඩා නියැදියක්:

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

සටහනක් පමණි - ASP.NET CLient ID මගින් අපැහැදිලි කර ඇති අයිතම උදුරා ගැනීමට මම jQuery හි ආදේශක තේරීම් භාවිතා කරමි - මෙය ඔබටද උදව් වනු ඇත:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

හැඳුනුම්පත * ආදේශක කාඩ්පත- නම "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown" වුවද මෙය ඔබගේ අංගය සොයා ගනී.

ග්‍රාහක අයිඩී ලබා ගැනීම සඳහා මම දීර් function ශ්‍රිතයක් භාවිතා කරමි.

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

එවිට ඔබට jQuery හි ASP.NET පාලනයන් අමතන්න:

$.clientID("_statusDDL")

තවත් විකල්පයක් වන්නේ .net හි පාලක පරාසය ClientID = "ස්ථිතික" ලෙස සැකසීමයි, එවිට ඔබට සැකසූ හැඳුනුම්පත මඟින් JQuery හි ඇති වස්තුවට ප්‍රවේශ විය හැකිය.

<asp:DropDownList id="MyDropDown" runat="server" />

භාවිතා කරන්න $("select[name$='MyDropDown']").val().

පතන ලැයිස්තුවට ඔබ අගයන් පටවන්නේ කෙසේද හෝ තෝරාගත යුතු අගය තීරණය කරන්නේ කෙසේද? ඔබ මෙය කරන්නේ අජැක්ස් භාවිතයෙන් නම්, තේරීම සිදුවීමට පෙර ඔබට ප්‍රමාදය අවශ්‍ය වීමට හේතුව විය හැක්කේ ප්‍රශ්නාර්ථ රේඛාව ක්‍රියාත්මක කරන අවස්ථාවේ අගයන් පටවා නොතිබීමයි. තත්වය සැකසීමට පෙර ඔබ අනතුරු ඇඟවීමේ ප්‍රකාශයක් රේඛාවට ඇතුළත් කළ විට එය ක්‍රියාත්මක වූයේ මන්ද යන්නත් මෙය පැහැදිලි කරයි. අනතුරු ඇඟවීමේ ක්‍රියාව මඟින් දත්ත පූරණය වීමට ප්‍රමාණවත් ප්‍රමාදයක් ලබා දෙනු ඇත.

ඔබ jQuery හි අජැක්ස් ක්‍රම වලින් එකක් භාවිතා කරන්නේ නම්, ඔබට ඇමතුම් ලබා ගැනීමේ ශ්‍රිතයක් නියම කර පසුව තැබිය හැකිය $("._statusDDL").val(2); කර ඔබගේ ඇමතුම් ආපසු ගැනීමේ ශ්‍රිතයට ඇතුළත් කළ හැකිය.

එම්එස් 300 ට වඩා වැඩි කාලයක් ගත වුවද, දත්ත සුදානම් වන විට ක්‍රියාත්මක කළ ක්‍රමය ඔබට සහතික විය හැකි බැවින් මෙය ගැටළුව විසඳීමේ වඩාත් විශ්වාසදායක ක්‍රමයකි.

<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
     <asp:ListItem Value="1" Text="aaa"></asp:ListItem>
     <asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode = "ස්ථිතික"

$('#DropUserType').val('1');

මගේ නඩුවේදී .attr () ක්‍රමය භාවිතයෙන් එය ක්‍රියාත්මක කිරීමට මට හැකි විය.

$("._statusDDL").attr("selected", "");

පිරිසිදු ජේ

සඳහා නවීන බ්රවුසරයන් CSS තේරීම් භාවිතා පිරිසිදු JS ප්රශ්නයක් නොවේ

document.querySelector('._statusDDL').value = 2;

function change() {
  document.querySelector('._statusDDL').value = 2;
}

<select class="_statusDDL">
  <option value="1" selected>A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

<button onclick="change()">Change</button>