javascript - 我无法使用 if 语句(javascript)从 html 选择菜单打印值

Question

我已经有一段时间遇到这些问题了，我不知道如何使变量(座位)等于“阳台”、“较低区域”、“一级”或“二级”。

我尝试过使用 .select ，制作一些失败的数组， .checked 。

我需要能够根据他们选择的选择菜单的位来使座位变量等于其中一个值(我正在使用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;
}

快速提醒我正在尝试做什么:

我需要将座位变量值打印到OrderInput变量。

这个座位变量需要是“较低区域”、“一级”、“阳台”或“二级”取决于他们点击的内容(选项)

Answer 1

编辑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 ，这是您想要的文本。

这是一个fiddle .