使用JavaScript为选择字段获取选项值文本而不是值

时间:2014-01-16 17:42:26

标签: javascript jquery html html-select

我在下面的页面上有一个select字段:

<select name="billing_state" id="id_billing_state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AS">American Samoa</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="GU">Guam</option>
</select>

<input type="checkbox" name="shipping_information" id="id_shipping_information" />

因此,当我们点击标识为id_shipping_information的复选框时,我应该获得像佛罗里达州,佐治亚州等选项文本,而不是CT,DE等选项值,如下所示

$('input#id_shipping_information').click(function(){
    if ($('input#id_shipping_information').is(':checked'))
    { 
        var bill =  $('#id_billing_state').val();
        console.log(bill+'>>>>>>>>>>');
    }
});

在上面的JavaScript代码中,我们将选择字段的值作为AL,AK,AS等,但是我们能够将它们作为阿拉巴马州,阿拉斯加州,美属萨摩亚岛等吗?

1 个答案:

答案 0 :(得分:4)

使用text()代替val()并定位选项

$('#id_shipping_information').click(function(){
    if ( this.checked ) { 
      var bill =  $('#id_billing_state option:selected').text();
      console.log(bill+'>>>>>>>>>>');
    }
});

更直观的方法是将选项的值更改为您想要的值?