我在这些方面遇到了一段时间的麻烦，我不知道如何使变量（座位）等于"阳台"、"下部区域"、"一级"或"二级"。
我尝试过使用.select，制作一些失败的数组，检查过。
我需要能够使座位变量等于根据他们选择的选择菜单位的值之一（我使用的是if语句）
我将在下面添加我的html和Javascript。
<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" class="lowerLvl" id="lowerArea" >Lower Area($200)</option>
<option name="selectmenu" value="150" class="levelOne" selected="selected" id="levelOne">Level 1($150)</option>
<option name="selectmenu" value="100" class="levelTwo" id="levelTwo">Level 2($100)</option>
<option name="selectmenu" value="200" class="balcony" id="balcony">Balcony($200)</option>
</select>
</div>
<!--End of DropDownBoxes-->
<!--START OF CHECK BOXES-->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Prefered night:</legend>
<input type="radio" name="checkbox1" id="checkbox1_0" class="custom" value="" checked="checked" /></option>
<label for="checkbox1_0">Thursday</label>
<br />
<input type="radio" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1">Friday</label>
<br /><!--Break as on Example-->
<input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />
<label for="checkbox1_2">Saturday</label>
</fieldset><!-- Above are check boxes -->
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Subscribe to weekly newsletter: </legend>
<input type="checkbox" name="newletter" id="news" class="custom" value="" />
</fieldset>
</div>
<!--END OF CHECK BOXES-->
<!--Put a tick box here that asks for weekly mail-->
<button type="submit" value="Register" onClick="validateGalaOrder()"></button>
<p id="OrderInput"></p><!--USERS INPUT RETURNS TO THIS <P>-->
<p id="tktCost"></p>
<p id="orderErrorMsg"></p><!--INCORRECT INPUT MESSAGES RETURN TO THIS <P>-->
下面是我的JavaScript。
请注意，有些JavaScript来自选择菜单上方html的其他部分。
目前，我正在从选择菜单中获取"值"（这是在变量cost下的else语句中）
function validateGalaOrder() {
var orderErrorMsg = "";
var OrderInput = "";
var ValidateOrderName = document.getElementById('txtOrderName').value;
var numTickets = document.getElementById('numTickets').value;
var Orderemail = document.getElementById('txtOrderEmail');
var filter = /*Email Symbol and letter Validator*/ /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/; //This filters out the email input
var lowerLvl = document.getElementById('lowerArea').value;
var lvlOne = document.getElementById('levelOne').value;
var lvlTwo = document.getElementById('levelTwo').value;
var Balcony = document.getElementById('balcony').value;
var cost = '';
var seating = '';
var prefNight; //This will contain the prefered night and print it
var newsLetter; //Has details about if they have chosen the newsletter or not.
if (ValidateOrderName.length <= 2) {
orderErrorMsg += ("<b>-ERROR- Please enter a valid name with a length of at least 3 letters</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('txtOrderName').value = ''; //will clear input field if false.
document.getElementById('txtOrderName').focus(); //this Focuses on textbox if input is wrong.
//alert("-ERROR- Please enter a name more than one letter!");
document.getElementById('OrderInput').innerHTML = ''; //If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
}
if (!filter.test(Orderemail.value)) {
orderErrorMsg += ("<b>-ERROR- Please provide a valid email address.</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('txtOrderEmail').value = '';
document.getElementById('txtOrderEmail').focus(); //this Focuses on textbox if input is wrong.
// alert('Please provide a valid email address');
document.getElementById('OrderInput').innerHTML = ''; //If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
}
if (numTickets <= 0) {
orderErrorMsg += ("<b>-ERROR- Please enter an amount of tickets greater than zero</b>");
document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
document.getElementById('numTickets').value = '';
document.getElementById('numTickets').focus(); //this Focuses on textbox if input is wrong.
/*alert("-ERROR- Please enter a mobile number with exactly 10 numeric digits");*/
document.getElementById('OrderInput').innerHTML = ''; //If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
return false;
} else {
if (document.getElementsById('lowerArea').checked == true) {
seating = "Lower Area";
}
if (document.getElementsById('levelOne').checked == true) {
seating = "Level One";
}
if (document.getElementsById('levelTwo').checked == true) {
seating = "Level Two";
}
if (document.getElementsById('balcony').checked == true) {
seating = "Balcony";
}
//Below is the checkbox printing
if (document.getElementById('checkbox1_0').checked == true) {
prefNight = 'Thursday';
}
if (document.getElementById('checkbox1_1').checked == true) {
prefNight = 'Friday';
}
if (document.getElementById('checkbox1_2').checked == true) {
prefNight = 'Saturday';
}
//Above is the checkbox printing
if (document.getElementById('news').checked == true) {
newsletter = "You wish to recieve our weekly E-mail";
}
if (document.getElementById('news').checked == false) {
newsletter = "You do not wish to recieve our weekly E-mail";
}
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.
}
return true;
}
只是快速提醒我要做什么：
我需要将座位变量值打印到订单输入的变量中。
这个座位变量需要是"下层区域"、"一级"、"阳台"或"二级"取决于他们点击的内容（选项）
编辑2:seating = document.getElementById('selectmenu').options[document.getElementById('selectmenu').selectedIndex].text.split('(')[0]
感谢Teemu的捕捉。
编辑：看了您的代码后，我想您可以将变量声明为seating = document.getElementById('selectmenu').options[document.getElementById('selectmenu').selectedIndex].text。
获取<select>元素的.selectedIndex，并使用它来获取它的.options[selectedIndex].text，这就是您想要的文本。
这是一把小提琴。
所以@flowstoneknight给出了正确的答案。我的新代码在下面。我现在可以获得该值并将其乘以输入的机票数量，还可以打印订单中的座位名称输入
我的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" class="lowerLvl" id="lowerArea" >Lower Area($200)</option>
<option name="selectmenu" value="150" class="levelOne" selected="selected" id="levelOne">Level 1($150)</option>
<option name="selectmenu" value="100" class="levelTwo" id="levelTwo">Level 2($100)</option>
<option name="selectmenu" value="200" class="balcony" id="balcony">Balcony($200)</option>
</select>
</div>
<!--End of DropDownBoxes-->
<!--START OF CHECK BOXES-->
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Prefered night:</legend>
<input type="radio" name="checkbox1" id="checkbox1_0" class="custom" value="" checked="checked" /></option>
<label for="checkbox1_0">Thursday</label>
<br />
<input type="radio" name="checkbox1" id="checkbox1_1" class="custom" value="" />
<label for="checkbox1_1">Friday</label>
<br /><!--Break as on Example-->
<input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />
<label for="checkbox1_2">Saturday</label>
</fieldset><!-- Above are check boxes -->
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Subscribe to weekly newsletter: </legend>
<input type="checkbox" name="newletter" id="news" class="custom" value="" />
</fieldset>
</div>
<!--END OF CHECK BOXES-->
<!--Put a tick box here that asks for weekly mail-->
<button type="submit" value="Register" onClick="validateGalaOrder()"></button>
<p id="OrderInput"></p><!--USERS INPUT RETURNS TO THIS <P>-->
<p id="tktCost"></p>
<p id="orderErrorMsg"></p><!--INCORRECT INPUT MESSAGES RETURN TO THIS <P>-->
这是我的Javascript片段，请注意，我只是发布了else语句中的选择菜单部分。
var seating = '';
seating = document.getElementById('selectmenu').options[document.getElementById('selectmenu').selectedIndex].text.split('(')[0]
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 +=("Thanks " + ValidateOrderName + " for your order!<br /> <br />" + "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.
}
return true;
}