1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

how to display text from any one select box from multiple select box using Jquery

Discussion in 'jQuery' started by vishalonne, Oct 13, 2012.

0
  1. #1
    Hello

    I want to display the Text from select box using the Jquery code. When will I click option from hotel1 then only selected text from hotel1 shall be printed and when I will select any option from hotel2 then only select option from hotel2 shall be printed.
    But ths is not happening with my code given below. It is printing from both the select box. And It also print when page is loaded.
    Where is my logic failed? Please guide.
    <!DOCTYPE html>
<html>
<head>
  <style>

  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <select id="hotel1">
    <option>Burgur</option>
    <option>Hot Dog</option>
    <option>Icecream</option>
    <option>Biscute</option>
    <option>Puff</option>
    <option>Pizza</option>
  </select>
 
  <select id="hotel2">
    <option>Burgur</option>
    <option>Hot Dog</option>
    <option>Icecream</option>
    <option>Biscute</option>
    <option>Puff</option>
    <option>Pizza</option>
  </select>
  
   <div></div>
<script>
   $("select").change(function () {
          var str = "";
          $("select option:selected").each(function () {
                str += $(this).text() + " ";
              });
          $("div").text(str);
        })
        .change();
</script>

</body>
</html>
    Code (markup):
    Thank you in Advance
     
    vishalonne, Oct 13, 2012 IP
  2. Wogan

    Wogan Peon

    Messages:
    81
    Likes Received:
    3
    Best Answers:
    2
    Trophy Points:
    0
    #2
    You're binding your .change() method to all the selects on the page, which is good, but then iterating over both of them in the same call - which is bad. Try this:

    <!DOCTYPE html>
<html>
<head>
  <style>

  div { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <select id="hotel1">
    <option>Burgur</option>
    <option>Hot Dog</option>
    <option>Icecream</option>
    <option>Biscute</option>
    <option>Puff</option>
    <option>Pizza</option>
  </select>
 
  <select id="hotel2">
    <option>Burgur</option>
    <option>Hot Dog</option>
    <option>Icecream</option>
    <option>Biscute</option>
    <option>Puff</option>
    <option>Pizza</option>
  </select>
  
   <div></div>
<script>
   $("select").change(function () {
          var str = $(this).children('option:selected').text();
          $("div").text(str);
        });
</script>

</body>
</html>
    HTML:
    That jQuery binds to all the selects on the page, but only the one that was actually changed fires the onchange event - which is the $(this) in that function.
     
    Last edited: Oct 17, 2012
    Wogan, Oct 17, 2012 IP