how to get selected item or value of html-combo box through javascript?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • nirmalsingh
    New Member
    • Sep 2006
    • 218

    how to get selected item or value of html-combo box through javascript?

    i have a combo box with id="combo1", i want to get the selected item or value through javascript. help me plz...
  • johnhjohn
    New Member
    • Dec 2006
    • 43

    #2
    I don't know what you want to get the value with but here is an example with a button:


    Code:
    <html>
    <head>
    <script language="javascript">
    function combofunction(the_value){
    
    // actions that you want to perform
    
    }
    </script>
    </head>
    <body>
    <select name="htmlcombo">
        <option name="box1" value="Value1">Display Text1</option>
        <option name="box2" value="Value2">Display Text2</option>
        <option name="box3" value="Value3">Display Text3</option>
    </select>
    <input type="button" name="combovalue" value="Get Combo Value" onclick="combofunction(htmlcombo.value)">
    </body>
    </html>

    Comment

    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032

      #3
      Originally posted by nirmalsingh
      i have a combo box with id="combo1", i want to get the selected item or value through javascript. help me plz...
      Use the following code:
      Code:
      var combo1 = document.getElementById("combo1");
      var val = combo1.options[combo1.selectedIndex].text
      If you have the form name, use that instead of getElementById.

      Comment

      • ronverdonk
        Recognized Expert Specialist
        • Jul 2006
        • 4259

        #4
        Originally posted by nirmalsingh
        i have a combo box with id="combo1", i want to get the selected item or value through javascript. help me plz...
        Easiest way is the following where your JS routine is triggered when you select an item from the drop down box. No need for a submit button.
        [code=html]function getCombo1(sel) {
        var value = sel.options[sel.selectedInd ex].value;
        }
        <select id="combo1" onchange="getCo mbo1(this)">
        <option value="">Select combo</option>
        <option value="Value1"> Text1</option>
        <option value="Value2"> Text2</option>
        <option value="Value3"> Text3</option>
        </select>[/code]
        Ronald :cool:

        Comment

        • mukeshrasm
          Contributor
          • Nov 2007
          • 254

          #5
          Originally posted by acoder
          Use the following code:
          Code:
          var combo1 = document.getElementById("combo1");
          var val = combo1.options[combo1.selectedIndex].text
          If you have the form name, use that instead of getElementById.
          I have modified this code like this
          Code:
          <input type="button" onclick="change(selectname.options[selectname.selectedIndex].value)"
          and passing to the click event of button. code works fine in IE but this does not work in Firefox Mozilla.

          Comment

          • acoder
            Recognized Expert MVP
            • Nov 2006
            • 16032

            #6
            That's because selectname will be undefined. IE is wrong here. You need to either define selectname, or write it out in full twice.

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032

              #7
              Originally posted by acoder
              If you have the form name, use that instead of getElementById.
              I did type this on January the 1st, 2007, but now I'd say that you should use document.getEle mentById(), though using the form name via document.forms[] is also valid. I'd also add that you can use the following code (as long as you have set the values of each of the options):
              Code:
              var combo1 = document.getElementById("combo1").value;

              Comment

              • mukeshrasm
                Contributor
                • Nov 2007
                • 254

                #8
                Originally posted by acoder
                I did type this on January the 1st, 2007, but now I'd say that you should use document.getEle mentById(), though using the form name via document.forms[] is also valid. I'd also add that you can use the following code (as long as you have set the values of each of the options):
                Code:
                var combo1 = document.getElementById("combo1").value;
                thanks for kind effort to solve the problem!

                Comment

                • Bala D

                  #9
                  button:
                  Code:
                  <input name="btnGo" value=" Search " class="seinput" type="submit" onclick="javascript:submitSearch();">
                  select option:
                  Code:
                  <select name="category" class="catpinput">
                                      <option value="-1" selected="selected">All Category</option>
                  JS Function:
                  Code:
                  function submitSearch()
                  {
                  var catkey = $('.catpinput').val();
                  window.alert(catkey);
                  }
                  Last edited by acoder; Oct 14 '10, 08:45 AM.

                  Comment

                  • acoder
                    Recognized Expert MVP
                    • Nov 2006
                    • 16032

                    #10
                    That's not JavaScript (OK, technically, it is, but it requires jQuery which you should mention).

                    There's also no need to use the "javascript :" protocol in an onclick.

                    Comment

                    Working...