根據選項「標籤」屬性替換HTML中的值

我需要替換頁面上的值取決於在下拉列表中選擇的內容。更具體地說，我需要填寫「標籤」值。這裏的HTML：現在根據選項「標籤」屬性替換HTML中的值

<select class="item-number"> 
    <option>Please select</option> 
    <option value="123" label="Description about 123">123</option> 
    <option value="456" label="Description about 456">456</option> 
</select> 

<span class="item-name">Description shows up here</span>

，如果有人選擇，比如說，選擇123，我需要在span文本與「描述有關123」所取代。有沒有辦法做到這一點？我是一個JS/Jquery新手，完全超出了我的深度。 ;）

來源

2013-05-17 Kai Brach

直接從 jQuery documentation

$("select").change(function() { 
    var str = ""; 
    $(".item-number option:selected").each(function (i) { 
     if ($(this).attr('label')) 
      str = $(this).attr('label'); 
     else 
      str = "Description shows up here "; 
    }); 
    $(".item-name").text(str); 
}).trigger('change');

Working Fiddle

進行一些更改上面的一個

，使其工作更加美好:)

UPDATE 1（OP上的請求）：

$('select').on('change',function(){ 
    label= $(this).find(':selected').val(); 
    $('.item-name').text(label); 
});

Working Fiddle

UPDATE 2：

$("select").change(function() { 
    var str = ""; 
    str = $(".item-number option:selected").val(); 
    if (str == "Please select") { 
     $(".no-add").show(); 
     $(".add").hide(); 
    } else { 
     $(".no-add").hide(); 
     $(".add").show(); 
    } 
    $(".item-name").text(str); 
}).trigger("change");

Working Fiddle

來源

2013-05-17 05:08:15

非常感謝，這太偉大工程！如果我決定不使用標籤而是標準選項值，我將如何更改代碼？此外，我想隱藏/顯示允許用戶將其選擇添加到購物車的按鈕。我在這裏添加了一些HTML http://jsfiddle.net/EZRXX/1。你會如此善意地指引我走向正確的方向嗎？謝謝！ :) –

@KaiBrach請檢查我更新的帖子。 :) –

這是完美的，謝謝！你能幫我把「添加到購物車」按鈕嗎？我已經在這裏嘗試過了，但它不能100％工作：http://jsfiddle.net/2MHSz/非常感謝！ –

就這麼簡單：

$("select.item-number").on("change", function() { 
    $(".item-name").text($(this).find(":selected").attr("label")); 
});

小提琴： http://jsfiddle.net/9YLZF/

乾杯！

來源

2013-05-17 04:58:26

$('.item-number').change(function() { 
    var lbl = $(this.options[this.selectedIndex]).attr('label'); 
    $('.item-name').html(lbl); 
});

這裏的FIDDLE

來源

2013-05-17 05:00:05

試試這個

$(document).on('change','select.item-number', function() { 
    $('.item-name').text($(this).find(':selected').attr('label')); 
});

Demo

來源

2013-05-17 05:10:53 Olrac

根據選項「標籤」屬性替換HTML中的值

回答

相關問題