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

Question

我试图让选择字段的值和文本以这种方式出现，但是作为文本。

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

输出：

'43'=>'AlabamaAlaskaAmerican SamoaArizonaArkansas ...怀俄明

Answer 1

你选择"#state option"比赛只有一个元素，所以each调用你的函数只有一次，这this函数内部是<select>。但是您应该重复执行<option> s。所以，你的代码应该是这样的：

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

http://jsfiddle.net/YNGdN/

Answer 2

更换

$("#state") 

随着

$("#state option") 

代码

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

Check Fiddle

Answer 3

你应该遍历option孩子的，就像这样：http://jsfiddle.net/xavier_seignard/3UfRq/2/

Answer 4

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

demo