如何利用javascript获取表单中select下拉列表中所选中项的值value

如何利用javascript获取表单中select下拉列表中所选中项的值value,第1张

单选下拉列表框对象的value属性值就是选中项的value值,因此只需用如下代码即可

1

var selected_val = documentgetElementById(select_id)value;

并且,通过 *** 作select下的option也可以得到被选项的value值,方法为:

var sel = documentgetElementById(select_id);

var selected_val = seloptions[selselectedIndex]value;

实例演示如下:

1、HTML结构及javascript代码

<select id="test" onchange="alert(thisvalue)">

<option value="0">options-0</option>

<option value="1">options-1</option>

<option value="2">options-2</option>

</select>

var obj = documentgetElementById("n1"); // 这里也可以写成var obj = documentgetElementByName("n1");var arrText = new Array();var arrValue = new Array();

for(var i = 0; i < objoptionslength; i++) {

arrText [arrText length] = objoptions[i]text; arrValue[arrValuelength] = objoptions[i]value;

}arrText 就是所有的TextarrValue就是所有的Value

Javascript

取select的选中值和文本方法:

拿到select对象:

var

myselect=document

getElementById

("test");

拿到选中项的索引:var

index=myselectselectedIndex

;

//

selectedIndex代表的是所选中项的index

拿到选中项options的value:

myselectoptions[index]value;

拿到选中项options的text:

myselectoptions[index]text;

纯JS

var e = documentgetElementById("form-field-select-4");

alert(getSelectValues(e));

// Return an array of the selected opion values

// select is an HTML select element

function getSelectValues(select) {

  var result = [];

  var options = select && selectoptions;

  var opt;

  for (var i=0, iLen=optionslength; i<iLen; i++) {

    opt = options[i];

    if (optselected) {

      resultpush(optvalue || opttext);

    }

  }

  return result;

}

JQuery

 var selectedValues = [];    

 $("#form-field-select-4 :selected")each(function(){

     selectedValuespush($(this)val()); 

 });

 alert(selectedValues);

以上就是关于如何利用javascript获取表单中select下拉列表中所选中项的值value全部的内容,包括:如何利用javascript获取表单中select下拉列表中所选中项的值value、通过js来获取select的全部值、Javascript怎么取select的选中值和文本等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9619364.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-30
下一篇2023-04-30

发表评论

登录后才能评论

评论列表(0条)

    保存