jQuery: select option get display value

要件：

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

# get the display value of Select using javascript

代码语言：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
});

代码语言：javascript复制

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

代码语言：javascript复制

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

详细：

html定义 （django 4.1）

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

代码语言：html复制

<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 取得

代码语言：javascript复制

$("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

jquery html5selectoption htmldata

0 人点赞