jQuery: select option get display value

原创

刀枪不入de王二花

修改于 2022-08-26 19:37:28

8310

修改于 2022-08-26 19:37:28

文章被收录于专栏：BETTERBETTER

要件：

select option 从DB取得，除了value, 还希望对表示值等进行处理

# get the display value of Select using javascript

$(function() { // on load
  var $sel = $("#consumption");
  $sel.on("change",function() {
    var value = $(this).val();                     // get value
    var text = $("option:selected", this).text();  // get text
    console.log(value,text)
  }).trigger("change"); // initial call
});

$('#consumption :selected').text();

var select = document.getElementById('consumption');
var text = select.options[select.selectedIndex].text;

详细：

html定义（django 4.1）

※value, text 以外，可以用html data来传递

<select id="tax1" name="tax1" data-id="tax_name1">
    <option value=""></option>
    {% for op in consumption %}
    <option value="{{op.tax_code}}" data-tax={{op.tax}}
        {%if op.tax_code == purchase_order.tax1 %}
        selected 
        {% endif %}>
        {{op.tax_name}}</option>
    {% endfor %}
</select>

select option value text data 取得

$("select").each(function(){
    // 消費税code設定：消費税表的主键（1，2，23，24）
    data[$(this).attr("id")] = $(this).val();     // data['tax2'] = 2

    if ($(this).data('id')){
        // 消費税名称設定                     　　　// data['tax_name2'] = '消費税８％'
        data[$(this).data('id')] = $("option:selected", this).text();
        // 消費税額取得
        let tax = $("option:selected", this).data('tax');    // 8
    }
})

for(let i = 1; i <= 6; i++){
    //　消費税額
    let tax_temp = $("option:selected","#tax" + i).data('tax');  // 8
    console.log(tax_temp);
}

#html data #selected option

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

jquery