Get text from select in HTML using JQUERY

Question

I'm trying to get the value of a selected element and show it at the console. I've searched everything, tried everything and it's not working. value1 I get it but value2 and 3 not.

If you have any other recommendation (besides using Jquery to do this, please do it)

Check it out

 $(document).ready(function() {

        $("button").click(function() {

            var value1 = $("#name-input").val();
            var value2 = $("#place-input").filter(":selected").text();
            var value3 = $("#tecnico-input").find(":selected").text();
            console.log(value1 + ' ' + value2 + ' ' + value3);
       
        });

    });

<form>
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">Name:</span>
                    <input type="text" class="form-control" placeholder="Ex.: John" aria-describedby="basic-addon1" id="name-input">
                </div>

                
                <div class="form-group">
                    <label for="sel1">Place:</label>
                    <select class="form-control" id="sel1" id="place-input">
                      <option value="1">Fixed</option>
                      <option value="2">Mobile</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="sel2">Technician:</label>
                     <select class="form-control" id="technician-input">
                          <option value="1">Brandon</option>
                          <option value="2">Justin</option>
                          <option value="3">Ryan</option>
                          <option value="4">Tyler</option>
                     </select>
                </div>

        </form>

I strongly appreciate the help.

$("#place-input").children().filter(":selected").text();, tecnico-input != technician-input. — David Thomas
– David Thomas, Commented Oct 9, 2017 at 21:12
AFAIK, you can't define an elements ID twice, may be the opposite assignment that is taking precedence — Jeff Beagley
– Jeff Beagley, Commented Oct 9, 2017 at 21:12

Farhad Bagherlo · Accepted Answer · 2017-10-09 21:29:59Z

2

dont use two id in one tag

$("input[type='button'").on('click',function() {
   var value1 = $("#name-input").val();
   var value2 = $("#place-input option:selected").text();
   var value3 = $("#technician-input option:selected").text();
   console.log(value1 + ' ' + value2 + ' ' + value3);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="click" />
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">Name:</span>
  <input type="text" class="form-control" placeholder="Ex.: John" aria-describedby="basic-addon1" id="name-input">
</div>
<div class="form-group">
  <label for="sel1">Place:</label>
  <select class="form-control"  id="place-input">
      <option selected value="1">Fixed</option>
      <option value="2">Mobile</option>
  </select>
</div>
<div class="form-group">
   <label for="sel2">Technician:</label>
   <select class="form-control"  id="technician-input">
      <option  value="1">Brandon</option>
     <option value="2">Justin</option>
     <option selected value="3">Ryan</option>
      <option value="4">Tyler</option>
   </select>
</div>

answered Oct 9, 2017 at 21:29

Farhad Bagherlo

6,6993 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

spaceman Over a year ago

very nice explanation. Thanks for the help. mistyping was the problem.

Barmar · Accepted Answer · 2017-10-09 21:14:54Z

2

.filter applies the selector to the collection selected by the previous selector. But :selected doesn't apply to the <select> element, it applies to the <option> elements within it. Use .find() to search for an element within another element.

var value2 = $("#place-input").find("option:selected").text();

or more simply:

var value2 = $("#place-input option:selected").text();

Also, you can't have two id attributes in an element. id="sel1" id="place-input" should just be id="place-input", and similarly for the other <select>.

answered Oct 9, 2017 at 21:14

Barmar

789k57 gold badges554 silver badges669 bronze badges

Comments

Dakota B · Accepted Answer · 2017-10-09 21:30:07Z

1

You have it right. You've just included two id attributes to each of your select tags in the HTML. HTML standards indicate only one id can be set for each DOM element. This means that if you replace the ids with the ones you use in the javascript code, or vice versa, you'll get the result you want with your .filter(":selected").text() code.

answered Oct 9, 2017 at 21:30

Dakota B

13810 bronze badges

Collectives™ on Stack Overflow

Get text from select in HTML using JQUERY

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related