Question

基本上我有一个select menu，他们可以选择他们想要的座位。这些菜单包含与之相关的定价值。 eg value="100".

但是现在我需要打印座位的名称（Balcony，levelOne，levelTwo，lowerArea）到显示在html p标签中的字符串。

这是我的html：

 <div data-role="fieldcontain"> 
      <label for="selectmenu" class="select">Preferred Seating:</label> <!-- Following drop down checkbox -->
      <select name="selectmenu" id="selectmenu">
        <option name="selectmenu" value="200" id="lowerArea" >Lower Area($200)</option>
        <option name="selectmenu" value="150" selected="selected" id="levelOne">Level 1($150)</option>
        <option name="selectmenu" value="100" id="levelTwo">Level 2($100)</option>
        <option name="selectmenu" value="200" id="balcony">Balcony($200)</option>
      </select>
    </div>

以下是javascript，目前在其他页面上还有其他值。基本上，成本变量将获取所选元素并将其乘以它们输入的票数。我想要做的是显示 OrderInput + =（）中的座位（Balconys，lowerArea等..）座位变量。

    cost = parseInt(document.getElementById('selectmenu').value,10) * numTickets;//This calculates the cost(selectMenu*numTickets)
    var Orderemail = document.getElementById('txtOrderEmail').value;//This will grab the email value Inputed.

OrderInput +=("Your details are: <br />" + "Your E-mail address is: " + Orderemail + "<br />" + newsletter + "<br /> <br />" +
"You have the following tickets reserved: <br />" + numTickets +" on " + prefNight + " and your seating is :" +  seating + "<br /> <br />" +  "The total cost of your order will be: $" + cost); 
        document.getElementById('OrderInput').innerHTML = OrderInput;//This prints the users details to a html element.
            document.getElementById('orderErrorMsg').innerHTML = '';//Removes error messages when everything is correct.

}

快速了解我想做的事情：我想在 orderInput 变量中的座位变量中打印座位安排的名称。我只是不知道如何做到这一点，因为它已经有了价值。它的价值是有价值的，因为我需要它来获得座位的价格。感谢。

Answer 1

简单的方法就是split innerText：

var seating=document.getElementById('selectmenu').innerText.split("(")[0];

最好是从prebuild数组构建你的select并使用ID。当用户选择您搜索id的内容时：

var array=[{name:"Lower Area",price:100},{name:"Level 1",price:150}];
var select=document.getElementById('selectmenu');
for(var id=0;id<array.length;id++) {
   select.innerHtml+="<select value='"+id+"'>"+array[id].name+" ($"+array[id].value+")</select>";
}

//on change event:
var slectedId=document.getElementById('selectmenu').value;
var seating =array[slectedId].name;
var cost=array[slectedId].price*amount;

为什么最后一个版本更好？您可以更轻松地扩展它。想象一下，你必须添加折扣。在您当前的解决方案中，您需要第三次拆分，它将变得非常混乱。如果使用数组，则可以使用标识array[selectedId].discount轻松扩展此数组并请求值，并计算总价。

编辑以便于理解

如果你有以下html：

  <select name="selectmenu" id="selectmenu">
    <option value="0">Lower Area ($200)</option>
    <option value="1">Level 1 ($150)</option>
  </select>

和Javascript数组：

var array=[{name:"Lower Area",price:100},{name:"Level 1",price:150}];

您可以通过更改事件中value html标记的option属性访问值：

document.getElementById('selectmenu').addEventListener("onchange",function() {
  var slectedId=document.getElementById('selectmenu').value;
  var seating =array[slectedId].name;
  var cost=array[slectedId].price*amount;
});

为什么呢？因为：

var array=[{name:"Lower Area",price:100},{name:"Level 1",price:150}];

等于这个：

var array=[];
array[0]={name:"Lower Area",price:100};
array[1]={name:"Level 1",price:150};

我需要在一个<option>元素</option>中访问两个值

这是我的html：

1 个答案: