Take custom attribute instead of val() with jQuery

Question

I have the following code:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.pack.js"></script>
</head>
<body>
<select name="size">
    <option custAttr="0" value="0" disabled selected>Value ↓</option>
    <option custAttr="10" value="10">AAA (10)</option>
    <option custAttr="20" value="20">BBB (20)</option>
    <option custAttr="30" value="30">CCC (30)</option>
</select>

<label class="result"></label>

<script>
$(document).ready(function() {
    $('select').on('change', function() {
        $('.result').text(
            $('select[name=size]').val()
        );
    });
});
</script>
</body>
</html>

Actually the script takes the content from value="". Is there a way that the script takes the code from my custom attribute custAttr=""?

Take a look at .attr()

Fabian Bettag
– Fabian Bettag

2016-10-03 11:14:15 +00:00
Commented Oct 3, 2016 at 11:14 — Fabian Bettag
– Fabian Bettag, Commented Oct 3, 2016 at 11:14

Rory McCrossan · Accepted Answer · 2016-10-03 11:14:57Z

4

Firstly note that creating your own attributes will mean your HTML is invalid which can have unexpected effects. Use data-* attributes to store your own data. From there you can use option:selected to get the required data value. Try this:

$(document).ready(function() {
  $('select').on('change', function() {
    $('.result').text($('select[name=size] option:selected').data('cust-attr'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="size">
  <option data-cust-attr="0" value="0" disabled selected>Value ↓</option>
  <option data-cust-attr="10" value="10">AAA (10)</option>
  <option data-cust-attr="20" value="20">BBB (20)</option>
  <option data-cust-attr="30" value="30">CCC (30)</option>
</select>

<label class="result"></label>

answered Oct 3, 2016 at 11:14

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

10 Comments

user6792802 Over a year ago

Thanks. It's working. I have to wait 5 minutes to accept.

Rory McCrossan Over a year ago

No problem, glad to help

user6792802 Over a year ago

Still a small question: Do you know how to replace dot by comma. E.g. 123,45 instead of 123.45.

Rory McCrossan Over a year ago

Yep, .replace(/,/g, '.')

user6792802 Over a year ago

Sorry for have to ask again, but: where to add this? I tried some ways, but it didn't work.

|

Rory McCrossan · Accepted Answer · 2016-10-03 11:15:46Z

0

As far as i know you can do it like this

$("#myselect option:selected").attr('custAttr');

edited Oct 3, 2016 at 11:15

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Oct 3, 2016 at 11:15

Asmarah

1348 bronze badges

Comments

Ashok kumar · Accepted Answer · 2016-10-03 11:16:54Z

0

$('select[name=size]').attr("custAttr");

.attr()

edited Oct 3, 2016 at 11:16

answered Oct 3, 2016 at 11:16

Ashok kumar

5421 gold badge5 silver badges22 bronze badges

Comments

Phani Rahul Sivalenka · Accepted Answer · 2016-10-03 11:17:02Z

0

attr() should do the trick!

$('select[name=size]').attr('custAttr');

answered Oct 3, 2016 at 11:17

Phani Rahul Sivalenka

1508 bronze badges

Collectives™ on Stack Overflow

Take custom attribute instead of val() with jQuery

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related