Question

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

我想通过javascript获取名称进行计算（更改时）（注意：不值）

＆＃13;

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

＆＃13;

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

＆＃13;

现在，我想在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

this.options =＆gt; array-like元素的option集合
this.selectedIndex =＆gt;索引selected option
getAttribute =＆gt;检索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 2

您可以尝试这样

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

Answer 3

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

<强>更新

如果您想将计算结果放在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 4

使用，$(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 5

为选择框设置onchange事件处理程序以查看当前选定的索引。

您可以使用其他属性代替＆＃34; name＆＃34;存储价值。您可以创建自己的属性：

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

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

＆＃13;

Answer 6

HTML DOM getAttribute() Method

使用Javascript从选项HTML获取名称

6 个答案: