Get name from option HTML with Javascript

Question

<option value="1" name="13.890000">Monster</option>

I would like to get name via javascript to do calculations (On change) (NOTE: NOT VALUE)

$("#calculateprice").on('change', function() {
    x =  $(this).children(':selected').attr('name');
    z = x/1000;
});

<select id="calculateprice" name="serviceid" class="form-control">
<option selected disabled>Select a monster</option>
<option value="1" name="13.890000">Monster 1</option>
<option value="2" name="25.890000">Monster 2</option>                                
</select>

<input id="quantity" name="quantity" type="text" placeholder="" class="form-control input-md" required>

<input id="price" name="price" type="text" class="form-control input-md" disabled>

Now, I would like to get amount entered in QUANTITY and multiply with Z and show the result in PRICE.

SOLVED LIKE THIS:

var z;
var totalprice;

$("#calculateprice").on('change', function() {
    x =  $(this).children(':selected').attr('name');
    z = x/1000;
});

$("#quantity").on('keyup', function() {
    value = $("#quantity").val();
    totalprice = z*value;
    totalresult = parseFloat(Math.round(totalprice * 100) / 100).toFixed(2);
    $('#price').val('$'+totalresult);
});

It is only client side calculation. Will not affect anything on server side. — logiacer
– logiacer, Commented Sep 28, 2016 at 10:52

Rayon · Accepted Answer · 2016-09-28 10:51:33Z

3

this.options => array-like collection of option elements
this.selectedIndex => index of selected option
getAttribute => retrieve specified attribute of element

document.getElementById('elem').onchange = function() {
  console.log(this.options[this.selectedIndex].getAttribute('name'));
}

<select id="elem">
  <option value="1" name="13.890000">Monster 1</option>
  <option value="2" name="14.890000">Monster 2</option>
</select>

answered Sep 28, 2016 at 10:51

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

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

Comments

devpro · Accepted Answer · 2016-09-28 11:56:48Z

2

In javascript, you can get the <option> attribute as:

document.getElementById('yourselect').onchange = function() {
  var e = document.getElementById("yourselect");
  var strAtt = e.options[e.selectedIndex].getAttribute('name'); // will return the value
  var strVal = e.options[e.selectedIndex].value; // will return the value
  var strText = e.options[e.selectedIndex].text; // will return the text
  console.log(strAtt);
  console.log(strVal);
  console.log(strText);
}

<select name="yourselect" id="yourselect">
<option value="0" name="">Select</option>
<option value="1" name="13.00">Monster</option>
</select>

Or if you want to use jQuery, than you can use:

$("#yourselect").change(function(){
  var val = $('option:selected', this).attr('name');
  alert(val); // will alert selected value
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="yourselect" id="yourselect">
<option value="0" name="">Select</option>
<option value="1" name="13.00">Monster</option>
</select>

Update:

If you want to put calculation result in price field than try this:

$("#calculateprice").on('change', function() {
    x =  $(this).children(':selected').attr('name');
    z = x/1000;
    $("#price").val(z);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="calculateprice" name="serviceid" class="form-control">
<option selected disabled>Select a monster</option>
<option value="1" name="13.890000">Monster 1</option>
<option value="2" name="25.890000">Monster 2</option>                                
</select>

<input id="quantity" name="quantity" type="text" placeholder="" class="form-control input-md" required>
<input id="price" name="price" type="text" class="form-control input-md" disabled>

edited Sep 28, 2016 at 11:56

answered Sep 28, 2016 at 10:55

devpro

16.1k3 gold badges29 silver badges39 bronze badges

2 Comments

TSR Over a year ago

He is asking for the name

TSR Over a year ago

Why is this the answer? The field quantity has to be multiplied by z

Bharat · Accepted Answer · 2016-09-28 10:50:47Z

2

You can try like this

var vl= $("#id").attr("name");

answered Sep 28, 2016 at 10:50

Bharat

2,4643 gold badges28 silver badges37 bronze badges

2 Comments

devpro Over a year ago

need in javascript

Rayon Over a year ago

Unfortunately jQuery is not tagged mate!

millsp · Accepted Answer · 2016-09-28 11:02:45Z

Setup the onchange event handler for the select box to look at the currently selected index.

You could use a different attribute instead of "name" to store values. You could create your own attribute like that:

<option id="1" name="option1" compute="13">

     <html>
     <head>
      <script type="text/javascript">
        window.onload = function() {
            var eSelect = document.getElementById('monsters');
            eSelect.onchange = function() {
              var selectedName = eSelect.options[eSelect.selectedIndex].getAttribute("name")
              
              console.log(selectedName);
            }
        }
      </script>
     </head>
     <body>
        <select id="monsters" name="monsters">
            <option value="x" name="13">Monster 1</option>
            <option value="y" name="14">Monster 2</option>
        </select>
    </body>
    </html>

TSR · Accepted Answer · 2016-09-28 12:22:54Z

1

Using, $(this).children(':selected').attr('name'); Your code should be something like: Here is the snippet

$("#select").on('change', function() {
  x =  $(this).children(':selected').attr('name');
  z = x/1000;

  y =  $('#quantity').val();
  price = y*z;
  $('#price').val(price);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
<option id ="#option1" value="1" name="13.890000">Monster</option>
<option id ="#option2" value="2" name="25.890000">Monster</option>

</select>
</br>
Quanity:
<input id="quantity" name="quantity" type="text" placeholder="" class="form-control input-md" required></br>
Price
<input id="price" name="price" type="text" class="form-control input-md" disabled></br>

edited Sep 28, 2016 at 12:22

answered Sep 28, 2016 at 10:56

TSR

21.5k32 gold badges123 silver badges250 bronze badges

1 Comment

logiacer Over a year ago

Now, I want to calculate another thing. Check post.

Dave Cripps · Accepted Answer · 2016-09-28 10:52:56Z

0

HTML DOM getAttribute() Method

answered Sep 28, 2016 at 10:52

Dave Cripps

9297 silver badges11 bronze badges

Collectives™ on Stack Overflow

Get name from option HTML with Javascript

6 Answers 6

Comments

2 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related