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