event - select javascript index




使用JavaScript在下拉列表中獲取選定的值? (12)

如何使用JavaScript從下拉列表中獲取選定的值?

我嘗試了下面的方法,但它們都返回選定的索引而不是值:

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

//This is one of the simplest form by (Narendra Kottamidde) :

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

之前的答案仍然有待改進,因為可能性,代碼的直觀性以及使用idname 。 可以讀出選定選項的三個數據 - 索引號,其值和文本。 這個簡單的跨瀏覽器代碼可以完成以下三項任務:

<!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 : http://jsbin.com/jiwena/1/edit?html,output

id應該用於化妝目的。 為了功能表單的目的, name仍然有效,同樣在HTML5中,仍然應該使用。 最後,請介意在某些地方使用方括號與圓括號。 正如之前解釋的那樣,只有(舊版本的)IE會接受所有地方的圓形。


以下代碼展示了與使用JavaScript從輸入/選擇字段獲取/放置值有關的各種示例。

工作DEMO

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

初學者可能想要使用NAME屬性而不是ID屬性訪問select中的值。 我們知道所有表單元素都需要名稱,甚至在他們獲得ID之前。

所以,我添加了getElementByName()解決方案,僅供新開發人員查看。

NB。 表單元素的名稱將需要唯一,以便表單在發布後可用,但DOM可以允許名稱由多個元素共享。 出於這個原因,如果可以的話,考慮將ID添加到表單中,或者使用表單元素名稱my_nth_select_named_xmy_nth_text_input_named_y來顯式my_nth_text_input_named_y

使用getElementByName示例:

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

只需使用

  • $('#SelectBoxId option:selected').text(); 獲取列出的文本

  • $('#SelectBoxId').val(); 獲取選定的索引值


如果你有一個看起來像這樣的select元素:

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

將使strUser2 。 如果你真正想要的是test2 ,那麼這樣做:

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

這將使strUser成為test2


如果你運行純粹為IE編寫的代碼,你可能會看到:

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

在Firefox中運行以上代碼會給你一個'不是函數'的錯誤,因為IE允許你使用()而不是[]:

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

正確的方法是使用方括號。


普通JavaScript:

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").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 selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

在一些罕見的情況下,您可能需要使用括號,但這將非常罕見。

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

我懷疑這個過程比兩行版本更快。 我只是想盡可能地整理我的代碼。

如果有人知道如何在一行中做到這一點,而不必兩次獲取元素,我很樂意為您評論並告訴我如何。 我還沒有弄清楚...


這是一個在onchange函數中完成它的簡單方法:

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


這是一段JavaScript代碼行:

var x = document.form1.list.value;

假設名為list name="list"的下拉菜單包含在名稱屬性name="form1"的表單中。


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

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






html-select