从选择框选项中获取值后如何提交

Question

I am a beginner with Javascript.我是 Javascript 的初学者。

I have written code for getting the values from selected option and it works fine.我已经编写了用于从所选选项中获取值的代码，并且它工作正常。

My question is after selecting all the three options, if I click on "submit" button it should go to the next page.我的问题是在选择所有三个选项后，如果我点击“提交”按钮，它应该转到下一页。

can someone please help on this?有人可以帮忙吗？

Condition to be executed while redirecting to another page:重定向到另一个页面时要执行的条件：

if(strUser == 'AAA') && (strUser1 == 'DDD') && (strUser1 == 'GGG'))
    {
        window.location.replace("sample4.html");
    }
    else if(strUser == 'BBB') && (strUser1 == 'EEE') && (strUser1 == 'HHH'))
    {
        window.location.replace("sample5.html");
    }
    else
        {
        alert("please select all the 3 options");
        }
}

Code:代码：

<body
    style="background-image: url(./img/ford3.png); background-size: cover;">
    <h3>welcome user!!</h3>
    <button class="ssystem">System</button>
    <button class="sub">Sub-System</button>
    <button class="subsub">Sub-Sub-System</button>

    <div class="box">
        <select name="select1" id="sys" onchange="showData();">
            <option value="1">AAA</option>
            <option value="2">BBB</option>
            <option value="3">CCC</option>
        </select>
    </div>
    <div class="box1">
        <select id="sub" onchange="showData();">
            <option value="4">DDD</option>
            <option value="5">EEE</option>
            <option value="6">FFF</option>
        </select>
    </div>
    <div class="box2">
        <select id="sub1" onchange="showData();">
            <option value="7">GGG</option>
            <option value="8">HHH</option>
            <option value="9">III</option>
        </select>
    </div>
    <input type="submit" value="Submit" id="button">
    <script>
    function showData() {
       var e = document.getElementById("sys");
    var e1 = document.getElementById("sub");
    var e2 = document.getElementById("sub1");
    var strUser = e.options[e.selectedIndex].text;
    alert(strUser);
    //var value = e1.options[e1.selectedIndex].value; //for index
    //alert(value);
    var strUser1 = e1.options[e1.selectedIndex].text;
    alert(strUser1);
    var strUser2 = e2.options[e2.selectedIndex].text;
    alert(strUser2);

     </script>

</body>

Answer 1

Solution解决方案

There were a few things wrong with your code.您的代码有一些问题。

Firstly, you want to make your state variables (values that can change) of a higher scope so you can share them between your functions.首先，你想让你的状态变量（可以改变的值）具有更高的范围，这样你就可以在你的函数之间共享它们。 These are the values of your <select> html elements.这些是<select> html 元素的值。

Since all your default values are at index zero, we can just default to that selected index value upon initialisation of the page.由于您的所有默认值都在索引零处，我们可以在页面初始化时默认为选定的索引值。

We can extract the <select> DOM element into a variable with document.getElementById() and then get the selected option value out of it like so:我们可以使用document.getElementById()将<select> DOM 元素提取到一个变量中，然后像这样从中获取选定的选项值：

var strUser = document.getElementById("sys").options[0].text; . .

Another thing is that your IF statements were incorrectly written.另一件事是您的 IF 语句写错了。 I amended this for example here:例如，我在这里修改了这个：

if (strUser == 'AAA' && strUser1 == 'DDD' && strUser2 == 'GGG')

I left the alerts in there so you can see the sequential flow of the code.我把警报留在了那里，所以你可以看到代码的顺序流。

Additionally, I moved the Javascript to a separate file and imported it through the <script> tag.此外，我将 Javascript 移到了一个单独的文件中，并通过<script>标签导入了它。 This is a nice separation of concerns.这是一个很好的关注点分离。

A link to a JSFiddle is here for a more visual effect of how the code works.这里有一个指向 JSFiddle 的链接，可以更直观地了解代码的工作方式。

I hope this helps.我希望这有帮助。

HTML HTML

<body
    style="background-image: url(./img/ford3.png); background-size: cover;">
    <h3>welcome user!!</h3>
    <button class="ssystem">System</button>
    <button class="sub">Sub-System</button>
    <button class="subsub">Sub-Sub-System</button>

    <div class="box">
        <select name="select1" id="sys" onchange="showData();">
            <option value="1">AAA</option>
            <option value="2">BBB</option>
            <option value="3">CCC</option>
        </select>
    </div>
    <div class="box1">
        <select id="sub" onchange="showData();">
            <option value="4">DDD</option>
            <option value="5">EEE</option>
            <option value="6">FFF</option>
        </select>
    </div>
    <div class="box2">
        <select id="sub1" onchange="showData()">
            <option value="7">GGG</option>
            <option value="8">HHH</option>
            <option value="9">III</option>
        </select>
    </div>
    <input type="submit" value="Submit" id="button" onclick="goToNextPage()">
    <script src="./script.js"></script>
</body>

Javascript Javascript

var strUser = document.getElementById("sys").options[0].text;
var strUser1 = document.getElementById("sub").options[0].text;
var strUser2 = document.getElementById("sub1").options[0].text;

function showData() {
  var e = document.getElementById("sys");
  var e1 = document.getElementById("sub");
  var e2 = document.getElementById("sub1");

  strUser = e.options[e.selectedIndex].text;
  alert(strUser);

  strUser1 = e1.options[e1.selectedIndex].text;
  alert(strUser1);

  strUser2 = e2.options[e2.selectedIndex].text;
  alert(strUser2);
}

function goToNextPage() {
  if (strUser == 'AAA' && strUser1 == 'DDD' && strUser2 == 'GGG') {
    window.location.replace("sample4.html");
  }
  else if (strUser == 'BBB' && strUser1 == 'EEE' && strUser2 == 'HHH') {
    window.location.replace("sample5.html");
  }
  else {
    alert("please select all the 3 options");
  }
}

从选择框选项中获取值后如何提交

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-30 20:10:51

Solution解决方案

从选择框选项中获取值后如何提交

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-30 20:10:51

Solution解决方案

解决方案1
1 已采纳 2020-03-30 20:10:51