Question

我是编码的新手，我目前正在完成一项任务。我基本上需要建立一个非常基本的网页，我可以向用户提问，然后使用他们的答案建议度假目的地。

我使用了一个带有用户选项的选择下拉框。我现在在js部分，我无法弄清楚如何获得他们的输入。

这是其中一个方框的代码：

<div class="container">
       <h1>Let's find your ideal vacation getaway!</h1>
       <div id="userinput">
         <form>
          <div class="form-group">
            <label for="question1">1.What is your favorite cuisine?</label>
            <select class="form-control">
              <option></option>
              <option>Mexican</option>
              <option>Italian</option>
              <option>Indian</option>
              <option>Caribbean</option>
            </select>

我的问题是，我利用什么功能来获得他们的答案，从而允许我使用分支来生成结果。如果这令人困惑，我很抱歉，就像我说的，我对此很新。

提前致谢！

Answer 1

您必须在HTML和JS部分进行一些更改。在HTML中添加value属性并为每个选项分配值。还要添加一个onchange事件处理程序，该处理程序将从下拉列表中更改选项时触发。

将id分配给select元素。使用selectedIndex获取所选项目的索引

<强> HTML

 <select class="form-control" onChange="getSelected()" id="selDesc">
              <option value="0"> Select a destination</option>
              <option value="1">Mexican</option>
              <option value="2">Italian</option>
              <option value="3">Indian</option>
              <option value="4">Caribbean</option>
            </select>

<强> JS

function getSelected(){
var getValue =document.getElementById("selDesc").selectedIndex;
alert(getValue);

}

JSFIDDLE

Answer 2

在Html代码中进行更改意味着在select标记上提供ID

<div class="container">
    <h1>Let's find your ideal vacation getaway!</h1>
    <div id="userinput">
        <form>
            <div class="form-group">
                <label for="question1">1.What is your favorite cuisine?</label>
                <select class="form-control" id="country">
                    <option value="0" selected> --Select--</option>
                   <option value="1">Mexican</option>
                   <option value="2">Italian</option>
                   <option value="3">Indian</option>
                   <option value="4">Caribbean</option>
                </select>
            </div>
        </form>
    </div>
</div>

JS使用Jquery

        $("#country").change(function (e) {                
            alert($(this).val());
        })

将js添加到选择器下拉列表以获取用户输入

2 个答案: