ජාවාස්ක්‍රිප්ට් භාවිතයෙන් තෝරාගත් අගය පතන ලැයිස්තුවෙන් ලබා ගන්න

ජාවාස්ක්‍රිප්ට් භාවිතයෙන් පතන ලැයිස්තුවෙන් තෝරාගත් අගය ලබා ගන්නේ කෙසේද?

මම පහත ක්‍රම අත්හදා බැලුවෙමි, නමුත් ඒවා සියල්ලම අගය වෙනුවට තෝරාගත් දර්ශකය ලබා දෙයි:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

ඔබට පෙනෙන පරිදි තෝරාගත් අංගයක් තිබේ නම්:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

මෙම කේතය ධාවනය කිරීම:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

වනු strUserඇත 2. ඔබට සැබවින්ම අවශ්‍ය වන්නේ test2නම් මෙය කරන්න:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

කුමන වනු strUserඇතtest2

සරල ජාවාස්ක්‍රිප්ට්:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery:

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];

var strUser = e.options[e.selectedIndex].value;

මෙය නිවැරදි වන අතර ඔබට වටිනාකම ලබා දිය යුතුය. එය ඔබ පසු පෙළද?

var strUser = e.options[e.selectedIndex].text;

එබැවින් ඔබ පාරිභාෂිතය පිළිබඳ පැහැදිලිය:

<select>
    <option value="hello">Hello World</option>
</select>

මෙම විකල්පයට ඇත්තේ:

• දර්ශකය = 0
• වටිනාකම = හෙලෝ
• පෙළ = හෙලෝ වර්ල්ඩ්

පහත කේතය ජාවාස්ක්‍රිප්ට් භාවිතයෙන් ආදාන / තෝරාගත් ක්ෂේත්‍ර වලින් අගයන් ලබා ගැනීම / තැබීම සම්බන්ධ විවිධ උදාහරණ ප්‍රදර්ශනය කරයි.

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

වැඩ කරන ජාවාස්ක්‍රිප්ට් සහ jQuery ආදර්ශනය

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

පහත දැක්වෙන ස්ක්‍රිප්ට් මඟින් තෝරාගත් විකල්පයේ වටිනාකම ලබාගෙන එය පෙළ කොටුව 1 ට ඇතුළත් කරයි

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

පහත දැක්වෙන ස්ක්‍රිප්ට් 2 පෙළ කොටුවකින් වටිනාකමක් ලබාගෙන එහි වටිනාකම සමඟ අනතුරු ඇඟවීමක් කරයි

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

පහත දැක්වෙන ස්ක්‍රිප්ට් එක ශ්‍රිතයකින් ශ්‍රිතයක් කැඳවයි

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>

var selectedValue = document.getElementById("ddlViewBy").value;

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සඳහා පමණක් ලියා ඇති කේතය හරහා ඔබ කවදා හෝ ධාවනය කරන්නේ නම් ඔබට මෙය දැක ගත හැකිය:

var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;

ඉහත සඳහන් දේ ෆයර්ෆොක්ස් සහ වෙනත් මඟින් ක්‍රියාත්මක කිරීමෙන් ඔබට 'ශ්‍රිතයක් නොවේ' දෝෂයක් ලැබෙනු ඇත, මන්ද ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් ඔබට [] වෙනුවට () භාවිතා කිරීමෙන් ගැලවීමට ඉඩ සලසයි:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

නිවැරදි ක්‍රමය වර්ග වරහන් භාවිතා කිරීමයි.

<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

ඕනෑම ආදාන / පෝරම ක්ෂේත්‍රයකට ඔබ මූලද්‍රව්‍යයේ සිට ප්‍රවේශ වන විට “මෙම” මූල පදය භාවිතා කළ හැකිය. මෙමඟින් ඩොම් ගසෙහි පෝරමයක් සොයා ගැනීමේ අවශ්‍යතාවය සහ පෝරමය තුළ මෙම මූලද්‍රව්‍යය සොයා ගැනීමේ අවශ්‍යතාවය ඉවත් කරයි.

හැඳුනුම් ලක්ෂණයට වඩා NAME ගුණාංගය සහිත තේරීමකින් ආරම්භකයින්ට අගයන් ලබා ගැනීමට අවශ්‍ය වනු ඇත. සෑම ආකාරයකම මූලද්‍රව්‍යයන්ට අයිඩී ලබා ගැනීමට පෙර නම් අවශ්‍ය බව අපි දනිමු.

එබැවින්, getElementByName()නව සංවර්ධකයින්ට ද දැකීමට මම විසඳුම එක් කරමි .

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

භාවිතා කරන උදාහරණය getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

JavaScript හෝ jQuery භාවිතයෙන් මෙය සිදු කිරීමට ක්‍රම දෙකක් තිබේ.

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

හෝ

var ddlViewBy = document.getElementById('ddlViewBy');

var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;

var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;

alert (value); // This will output the value selected

alert (text); // This will output the text of the value selected

jQuery:

$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

භාවිතා කරන්න

• $('#SelectBoxId option:selected').text(); ලැයිස්තුගත කර ඇති පරිදි පෙළ ලබා ගැනීම සඳහා

• $('#SelectBoxId').val(); තෝරාගත් දර්ශක අගය ලබා ගැනීම සඳහා

පෙර පිළිතුරු තවමත් වැඩිදියුණු කිරීමට ඉඩ නොතබන්නේ හැකියාවන්, කේතයේ idඅවබෝධය සහ එදිරිව භාවිතය නිසාය name. තෝරාගත් විකල්පයක දත්ත තුනෙන් කියවීම කෙනෙකුට ලබා ගත හැකිය - එහි දර්ශක අංකය, එහි වටිනාකම සහ පෙළ. මෙම සරල හරස් බ්‍රව්සර් කේතය මේ තුනම කරයි:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>

සජීවී නිරූපණය: http://jsbin.com/jiwena/1/edit?html,output .

idවේශ නිරූපණ සඳහා භාවිතා කළ යුතුය. ක්‍රියාකාරී පෝරම සඳහා, nameHTML5 හි තවමත් වලංගු වන අතර එය තවමත් භාවිතා කළ යුතුය. අවසාන වශයෙන්, ඇතැම් ස්ථානවල හතරැස් හා වටකුරු වරහන් භාවිතා කිරීම මතක තබා ගන්න. කලින් පැහැදිලි කළ පරිදි, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් (පැරණි සංස්කරණ) පමණක් සෑම තැනකම වටකුරු ඒවා පිළිගනු ඇත.

JQuery භාවිතා කිරීම:

$('select').val();

තවත් විසඳුමක් නම්:

document.getElementById('elementId').selectedOptions[0].value

එය ක්‍රියාත්මක වන ආකාරය පිළිබඳ උදාහරණ ක්‍රියාත්මක කිරීම:

var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3"  selected="selected">test3</option>
</select>

සටහන: පහත වැටීම වෙනස් වන විට අගයන් වෙනස් නොවේ, ඔබට එම ක්‍රියාකාරීත්වය අවශ්‍ය නම් onClick වෙනසක් ක්‍රියාත්මක කළ යුතුය.

ඔබට භාවිතා කළ හැකිය querySelector.

උදා

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

මෙය සාක්ෂාත් කරගන්නේ කෙසේද යන්න පිළිබඳව මට තරමක් වෙනස් මතයක් ඇත. මම සාමාන්‍යයෙන් මෙය කරන්නේ පහත දැක්වෙන ප්‍රවේශයෙනි (එය පහසු ක්‍රමයක් වන අතර මා දන්නා පරිදි සෑම බ්‍රව්සරයක් සමඟම ක්‍රියා කරයි):

<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>

2015 දී ෆයර්ෆොක්ස් හි පහත සඳහන් දෑ ද ක්‍රියාත්මක වේ.

ඊ. විකල්ප .selectedIndex

පෙර පිළිතුරු සමඟ යාමට, මම මෙය එක් ලයිනර් ලෙස කරන්නේ කෙසේද යන්නයි. මෙය තෝරාගත් විකල්පයේ සත්‍ය පෙළ ලබා ගැනීම සඳහා ය. දැනටමත් දර්ශක අංකය ලබා ගැනීම සඳහා හොඳ උදාහරණ තිබේ. (සහ පෙළ සඳහා, මට අවශ්‍ය වූයේ මේ ආකාරයෙන් පෙන්වීමටයි)

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

සමහර දුර්ලභ අවස්ථාවන්හිදී ඔබට වරහන් භාවිතා කිරීමට අවශ්‍ය විය හැකි නමුත් මෙය ඉතා කලාතුරකිනි.

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

පේළි දෙකේ අනුවාදයට වඩා වේගයෙන් මෙම ක්‍රියාවලිය සිදුවන බව මට සැකයි. මම කැමතියි මගේ කේතය හැකිතාක් ඒකාබද්ධ කිරීමට.

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

මෙන්න ජාවාස්ක්‍රිප්ට් කේත රේඛාවක්:

var x = document.form1.list.value;

පතන මෙනුව ලැයිස්තුව නම් name="list"කර ඇති අතර නාම ලක්ෂණ සහිත පෝරමයකට ඇතුළත් කර ඇතැයි උපකල්පනය කරන්න name="form1".

querySelectorමෙය සාක්ෂාත් කර ගැනීම සඳහා ඔබ භාවිතා කළ යුතුය . පෝරම මූලද්‍රව්‍ය වලින් අගය ලබා ගැනීමේ මාර්ගයද මෙය ප්‍රමිතිකරණය කරයි.

var dropDownValue = document.querySelector('#ddlViewBy').value;

ෆෙඩල්: https://jsfiddle.net/3t80pubr/

මෙය කළ හැකි සරලම ක්‍රමය නම්:

var value = document.getElementById("selectId").value;

ප්‍රශ්නය නිවැරදිව නොතේරෙන තැනැත්තා මම දැයි මම නොදනිමි, නමුත් මෙය මට වැඩ කළේය: ඔබේ HTML හි හුවමාරු () සිදුවීමක් භාවිතා කිරීම, උදා.

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

// javascript

function sele(){
    var strUser = numberToSelect.value;
}

මෙය එක් ක්ලික් එකකට තෝරාගත් පතන අගයෙහි ඕනෑම අගයක් ලබා දෙනු ඇත

හුවමාරු ශ්‍රිතයක් තුළ එය කිරීමට පහසු ක්‍රමයක් මෙන්න:

event.target.options[event.target.selectedIndex].dataset.name

කරන්න: document.getElementById('idselect').options.selectedIndex

එවිට ඔබට තෝරාගත් දර්ශක අගය 0 සිට ආරම්භ වේ.

උත්සාහ කරන්න

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

වඩාත් නවීන බ්‍රව්සර් වලදී, ව්‍යාජ පංතියquerySelector භාවිතා කරමින් තෝරාගත් විකල්පය එක් ප්‍රකාශයකින් ලබා ගැනීමට අපට ඉඩ දෙයි . තෝරාගත් විකල්පයෙන්, අපට අවශ්‍ය ඕනෑම තොරතුරක් රැස් කර ගත හැකිය::checked

const opt = document.querySelector('#ddlViewBy option:checked');
// opt is now the selected option, so
console.log(opt.value, 'is the selected value');
console.log(opt.text, "is the selected option's text");

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

විකල්ප කිහිපයක් සහිත පතන මෙනුවක් සාදන්න (ඔබට අවශ්‍ය තරම්!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

මම ටිකක් හාස්‍යජනකයි. මෙන්න කේත ස්නිපටය:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

ස්නිපටය වැඩ කළා