如何获取选择字段的值和文本?

时间:2012-11-29 18:45:38

标签: jquery

我试图让选择字段的值和文本像这样出来,但作为文本。

'1' => 'Alabama'
'2' => 'Alaska'
'3' => 'American Samoa'
..etc

但我得到的结果看起来并不合适,这里是jsfiddle:http://jsfiddle.net/3UfRq/

JS:

$(document).ready(function() {
   $("#state").each(function() {
   $("p#out").text("'" + $(this).val() + "' => '" + $(this).text() + "'<br/>");
    });
});

HTML:

<select id="state">
  <option value="1">Alabama</option>
  <option value="2">Alaska</option>
  ...
  <option value="65">Wyoming</option>
</select>

输出:

  

&#39; 43&#39; =&GT; &#39;阿拉巴马州阿拉斯加州美属萨摩亚亚利桑那州阿肯色州...怀俄明州&#39;

4 个答案:

答案 0 :(得分:0)

您的选择器"#state option"仅匹配一个元素,因此each仅调用您的函数一次,此函数内的this<select>。但是你应该遍历<option>。所以你的代码应该是这样的:

$(document).ready(function() {
   $("#state option").each(function() {
     $("p#out").append("'" + $(this).val() + "' => '" + $(this).text() + "'<br/>");
  });
});

http://jsfiddle.net/YNGdN/

答案 1 :(得分:0)

替换

$("#state")

$("#state option")

<强>代码

$(document).ready(function() {
   $("#state option").each(function() {
   $("p#out").append("'" + $(this).val() + "' => '" + $(this).text() + "'<br/>");
    });
});​

<强> Check Fiddle

答案 2 :(得分:0)

您应该遍历option个孩子,例如:http://jsfiddle.net/xavier_seignard/3UfRq/2/

答案 3 :(得分:0)

$('#state option').map(function(i, opption) {
    $('#out').append(i + ' => ' + option.text + '<br/>');
});

demo