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

   

<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);
});

• javascript
• html

• you mean the elements .name attribute? – Jaromanda X Commented Sep 28, 2016 at 10:49
• Yes, that's correct. – logiacer Commented Sep 28, 2016 at 10:49
• how would you get the value? – Jaromanda X Commented Sep 28, 2016 at 10:50
• name="13.890000" in option?? – devpro Commented Sep 28, 2016 at 10:50
• It is only client side calculation. Will not affect anything on server side. – logiacer Commented Sep 28, 2016 at 10:52

6 Answers 6

• 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>

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./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./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>

You can try like this

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

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" pute="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>

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./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>

   

HTML DOM getAttribute() Method