从选择元素中获取选择的选项


93

我试图从下拉列表中选择选项,并用该文本填充另一个项目,如下所示。IE正在风起云涌,它在Firefox中不起作用:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text('#ddlCodes option:selected').text();
});

我究竟做错了什么?

Answers:


187

这是一个简短的版本:

$('#ddlCodes').change(function() {
  $('#txtEntry2').text($(this).find(":selected").text());
});

karim79很受欢迎,从您的元素名称判断txtEntry2可能是一个文本框,如果是任何输入,则需要使用.val().text()类似的方式:

  $('#txtEntry2').val($(this).find(":selected").text());

对于“怎么了?” 问题的一部分:.text()不使用选择器,不使用您想要将其设置为的文本,或者不返回任何已存在的文本。因此,您需要获取所需的文本,然后将其放入.text(string)要设置的对象的方法中,就像我上面提到的那样。


7
如果txtEntry2是文本输入,则将需要使用OP val()
karim79 2010年

@ karim79-好吧,它的名称可能正在更新。
尼克·克拉弗

是的,通过将.text更改为.val并以不同方式获取文本,所有内容都可以显示。谢谢家伙
马特

您只是让我免于正式发疯!
nathanchere 2011年

15

试试这个:

$('#ddlCodes').change(function() {
  var option = this.options[this.selectedIndex];
  $('#txtEntry2').text($(option).text());
});

8

这是应该也可以使用的较短版本:

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });

未捕获的类型错误:对象#<HTMLSelectElement>没有方法'VAL'
DoodleKana

1
this.value会解决它。
克里斯·塞尔贝克

4

使用更少的jQuery:

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].value 是纯JavaScript。

(来源:德语SelfHTML


2

尝试以下代码

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});

2

要知道所选元素的数量,请使用

$("select option:selected").length

要获取所有选定元素的值,请使用

    var str = "";
  $("select option:selected").each(function () {
        str += $(this).text() + " ";
      });


1

第一部分是从下拉菜单中获取元素,如下所示:

<select id="cycles_list">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
</select>

要通过jQuery捕获,您可以执行以下操作:

$('#cycles_list').change(function() {
    var mylist = document.getElementById("cycles_list");
    iterations = mylist.options[mylist.selectedIndex].text;
});

将值存储在变量中之后,下一步就是将存储在变量中的信息发送到您选择的表单字段或HTML元素。它可以是div p或自定义元素。

<p></p> OR <div></div>

您将使用:

$('p')。html(迭代); 或$('div')。html(迭代);

如果要填充文本字段,例如:

<input type="text" name="textform" id="textform"></input>

您将使用:

$('#textform')。text =迭代;

当然,您可以用更少的步骤来完成上述所有操作,我只是相信,当您将所有内容分解为易于理解的步骤时,它可以帮助人们学习...希望这会有所帮助!


1

使用selectedOptions属性(HTML5),可以获得所选的选项

document.getElementbyId("id").selectedOptions; 

使用JQuery可以做到这一点

$("#id")[0].selectedOptions; 

要么

$("#id").prop("selectedOptions");

该属性包含与此选择的一个类似的HTMLCollection数组

[<option value=​"1">​ABC</option>]

或多项选择

[<option value=​"1">​ABC</option>, <option value=​"2">​DEF</option> ...]

0

上面的代码很好用,但是似乎您错过了下拉文本的jQuery类型转换。除此之外,建议.val()为输入文本类型元素设置文本。经过这些更改,代码如下所示:

    $('#txtEntry2').val($('#ddlCodes option:selected').text());

0

如果您已经有了这个并且使用jquery,这将是您的答案:

$($(this)[0] .selectedOptions [0])。text()


0

鉴于此HTML:

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

按说明选择jQuery v1.6 +:

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.