Получить название опции HTML с Javascript

Question

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

Я хотел бы получить имя, чтобы сделать расчеты (изменение) (Примечание: НЕ VALUE) с помощью JavaScript

$("#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> 
 

 

Теперь я хотел бы получить сумму, введенную в QUANTITY, и умножить ее на Z и показать результат в PRICE.

решаемые ТАКИМ:

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

Answer 1

В JavaScript вы можете получить атрибут <option> как:

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>

Или, если вы хотите использовать JQuery, чем вы можете использовать:

$("#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:

Если вы хотите поместить результат вычисления в price, чем попробуйте это:

$("#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>

Answer 2

Вы можете попробовать, как этот

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

Answer 3

• this.options =>array-like коллекция option элементов
• this.selectedIndex => Список selectedoption
• getAttribute => Получить указания attribute из 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>

Answer 4

HTML DOM getAttribute() Method

Answer 5

Использование, $(this).children(':selected').attr('name'); Ваш код должен быть что-то вроде: Вот это сниппет

$("#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> 
 

 

Answer 6

Настройте OnChange обработчик события для выбора коробки посмотреть на текущий y выбранный индекс.

Для хранения значений вы можете использовать другой атрибут вместо имени. Вы можете создать свой собственный атрибут так:

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