Twitter Bootstrap Question posted in

html selectpicker selected value in html-Twitter bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    
</head>
<body>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    
    <select class="selectpicker" data-live-search="true" name="cars" id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>

    <button onclick="myFunction()">Get Selected Value</button>

    <p id="demo"></p>
    
    <script>
    function myFunction() {
        var text = $("select[name=cars] option[value='1']").text();
        document.getElementById("demo").innerHTML = text;
        console.log(text);
    }
    </script>   
    
</body>
</html>

i am trying to get the selected value from the drop down list but not getting anything , what will be the right syntax, what is being returned is blank

Tags:

2

Answers


  1. 0

    We have to get the value of your dropdown list, i have added the script below hopefully it helps.

        <script>
            function myFunction() 
               {
                var text = $("#cars").val();
                document.getElementById("demo").innerHTML = text;
                console.log(text);
                }
     </script>
    Login or Signup to reply.
  2. 0

    This simplifies things a bit.

    I added this to myFunction

    var picked = $("select[name=cars]").val();

    And then use the picked variable:

    document.getElementById("demo").innerHTML = picked;

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

</head>

<body>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />

  <select class="selectpicker" data-live-search="true" name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>

  <button onclick="myFunction()">Get Selected Value</button>

  <p id="demo"></p>

  <script>
    function myFunction() {
      var picked = $("select[name=cars]").val();
      document.getElementById("demo").innerHTML = picked;
      console.log(picked);
    }
  </script>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search