Add js to a selector dropdown in order to get userinput

Question

I am new to coding and I am currently working on an assignment. I basically need to build a very basic webpage in which I can ask questions to users and then suggest a vacation destination using their answers.

I used a select dropdown box with options for the user. I am now on the js part and I cannot figure out how to get their input.

this is my code for one of the boxes:

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

My question is, what function do I utilize to get their answers, thus allowing me to use branching to generate results. I am sorry if this is confusing, like I said, I am very new to this.

Thanks in advance!

If this is a school assignment then this should have been covered in class; I'd suggest - again, *if this is a school assignment* - working with your peers, or asking for direction from your tutor. Beyond that you need to show us how far you got, what attempts did you make, what results did that have? What went wrong, where did you get stuck? — David Thomas, Jun 11 '16 at 14:28
Possible duplicate of [Get selected value in dropdown list using JavaScript?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Kian Cross, Jun 11 '16 at 14:29
Hi David , this is a class assignment that only requires us to use text boxes and not dropdown list. I wanted to go the extra mile and challenge myself, therefore I opted for the dropdown list. I think I went too far ahead for what we have done in class. I am only in an intro class to decide whether I want to pursue this or not. – — Vanessa Sharma, Jun 11 '16 at 16:36
this was my attempt:$(document).ready(function() { $("form#userinput").submit(function() { event.preventDefault(); var number1 = $("#question1").val(); var number2 = $("#question2").val(); var number3 = $("#question3").val(); var number4 = $("#question4").val(); var number5 = $("#question5").val(); var result; if (number1 === "Mexican" && number2 === "Sunshine all day long") { document.write('
Mexico
'); } $("#output").text(result); — Vanessa Sharma, Jun 11 '16 at 16:37

score 0 · Answer 1 · answered Jun 11 '16 at 14:34

You have to make some changes in both HTML and JS part. In HTML add value attribute and assign a value to each of the options. Also add an onchange event handler which will be fired on change of options from drop-down.

Assign an id to the select element. Use selectedIndex to get index of selected item

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

Krazy_Tech · Answer 2 · 2016-06-11T14:52:15.040

Make changes in Html Code means give the id on select tag

<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 use Jquery

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

Add js to a selector dropdown in order to get userinput

Mexico

2 Answers2