javascript - 我需要访问一个 元素中的两个值

Question

基本上，我有一个选择菜单，他们可以在其中选择他们想要的座位，这些菜单具有与之相关的定值(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 += () 内的座位(阳台、下部区域等..)座位变量。

    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 变量内的 seating 变量中打印座位安排的名称。我只是不知道该怎么做，因为它已经有值(value)了。它的值(value)很有值(value)，因为我需要它来获得座位的价格。谢谢。

Answer 1

简单的方法就是分割内部文本:

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

更好的方法是从预构建数组中构建选择并使用 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;

为什么上一个版本更好？您可以更轻松地扩展它。想象一下您必须添加折扣。在您当前的解决方案中，您需要第三次拆分，这会变得非常困惑。如果您使用数组，则可以轻松扩展此数组并使用 id 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}];

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

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