Replace value in HTML based on option "label" attribute

Question

I need to replace a value on the page based on what is selected in a dropdown. More specifically I need to fill in the "label" value. Here's the 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>

Now, if someone selects, say, option 123, I would need the text in the span to be replaced with "Description about 123". Is there a way to achieve this? I'm a JS/Jquery newbie and completely out of my depth here. ;)

Vond Ritz · Accepted Answer · 2013-05-17 05:00:05Z

1

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

here's the FIDDLE

answered May 17, 2013 at 5:00

Vond Ritz

2,01215 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Olrac · Accepted Answer · 2013-05-17 05:10:53Z

1

Try this

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

Demo

answered May 17, 2013 at 5:10

Olrac

1,5372 gold badges10 silver badges22 bronze badges

Comments

Mr_Green · Accepted Answer · 2013-05-17 06:08:36Z

0

Straight from 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

Make some changes to the above one to make it work more better :)

UPDATE 1(on OP's request):

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

edited May 17, 2013 at 6:08

answered May 17, 2013 at 5:08

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

3 Comments

Kai Brach Over a year ago

Thanks very much, this works great too! If I decide NOT to use the label but the standard option value, how would I change the code? Also, I'd like to hide/show a button that allows users to add their selection to a cart. I've added some HTML here jsfiddle.net/EZRXX/1. Would you be so kind as to point me in the right direction? THANK YOU! :)

Kai Brach Over a year ago

That is perfect, thanks! Can you just help me get the "add to cart" button right? I've tried this here, but it's not working 100% yet: jsfiddle.net/2MHSz Thanks so much!!!

Mr_Green Over a year ago

@KaiBrach Check this Fiddle. You can make modifications to it to make it better :).

Mr. B. · Accepted Answer · 2013-05-17 04:58:26Z

0

It's that simple:

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

Fiddle: http://jsfiddle.net/9YLZF/

Cheers!

answered May 17, 2013 at 4:58

Mr. B.

8,82516 gold badges76 silver badges121 bronze badges

Collectives™ on Stack Overflow

Replace value in HTML based on option "label" attribute

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related