This question already has answers here:
Get selected value in dropdown list using JavaScript
(32 answers)
Closed 6 years ago.
I want to add element <p> with value option selected.
<select id='select'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>text</p>
<p>text</p>
<p>text</p>
if I select 4, element <p> will appear 4 <p> element.
how to make it using nativ javascript? not jquery
If you are looking for plain JS implementation, here is what you could do.
document.addEventListener("DOMContentLoaded", function() {
let selectEle = document.querySelector("#select");
function setVal() {
let val = selectEle.options[selectEle.selectedIndex].value;
document.querySelector("p").innerText = val;
}
selectEle.addEventListener("change", function(event) {
setVal();
});
setVal();
});
<select id='select'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>text</p>
With pure javascript you can do it like this create an external function and call it on change.
<script>
var create_p= function()
{
var number =document.getElementById('select').value;
document.getElementById("add").innerHTML='<p>'+number+'</p>';
}
</script>
<select id='select' onchange="create_p()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="add">
</div>
First I advise you give a class or id to the <p> you want to put the text in. But the following should get you started.
$('#select').on('change', function() {
$('p').text($('#select').val());
});
Related
I have a problem like the following. I embed a chart in my site with inframre tags with . My website has a option tag. How can I change url 1 in an iframe to url2 when choosing option 2, url3 when choosing option 3. A solution would be very grateful.
Example :
<iframe src="url1"></iframe>
<select id "select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
I found a very simple solution. This is my solution.
<iframe src="url1" id="urlFrame"></iframe>
<select id="tuyencap" onchange="changeValue(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script type="text/javascript">
function changeValue(){
var tuyencap = document.getElementById("tuyencap").value;
alert(tuyencap)
if (tuyencap ==1){
document.getElementById('urlFrame').src="url1";
}
else if (tuyencap ==2){
document.getElementById('urlFrame').src="url2";
}
else if (tuyencap ==3){
document.getElementById('urlFrame').src="url3";
}
else if (tuyencap ==4){
document.getElementById('urlFrame').src="url4";
}
}
</script>
use onchange for your select element
<iframe src="url1" id="urlFrame"></iframe>
<select id = "select" onchange="changeValue(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Javascript:
function changeValue(element){
var value = element.value;
document.getElementById('urlFrame').src = value;
}
Note
The value of your options should be the URL you intend to use so instead of:
<option value="1">1</option>
I expect you should have something like:
<option value="http://google.com">1</option>
EDIT 1
You can use the innerHTML also but I don't think it's good user experience
<option value="1">http://google.com</option>
__
var value = element.innerHTML;
document.getElementById('urlFrame').src = value;
EDIT 2
Like #LelioFaieta suggested you can use the data.* attribute:
<option data-url="http://google.com" value="1">1</option>
Javascript:
function changeValue(element){
var urlSelect = element.dataset.url;
document.getElementById('urlFrame').src = urlSelect;
}
You can do with data attribute if you need.
<iframe src="url1" id="urlFrame"></iframe>
<select id="select" onchange="changeValue(this)">
<option value="1" data-url="url1">1</option>
<option value="2" data-url="url2">2</option>
<option value="3" data-url="url3">3</option>
<option value="4" data-url="url4">4</option>
</select>
function changeValue(){
var x = document.getElementById("select");
var myoption = x.options[x.selectedIndex];
var urlSelect = myoption.dataset.addr;
alert('urlSelect = '+urlSelect);
document.getElementById('urlFrame').src = urlSelect;
}
The dataset attribute is the attribute that read all the data attributes from your option tag.
Hi please check the code below,it's working absolutely fine. You just need to change path as per your requrement
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<iframe height="800px" width="800px"
src="http://cdns2.freepik.com/free-photo/facebook-logo_318-49940.jpg"
id="imageToSwap" class="profile"></iframe>
<select onchange="$('#imageToSwap').attr('src',
this.options[this.selectedIndex].value);">
<option value="http://cdns2.freepik.com/free-photo/facebook-
logo_318-49940.jpg" selected>Facebook</option>
<option value="http://cdns2.freepik.com/free-photo/twitter-logo_318-
40459.jpg">Twitter</option>
</select>
I am teaching myself how to code. I can't figure out how to take multiple values from an HTML drop down form and directly input them into a predefined function via javascript.(Form attributes?)
<form action="mywebsite.html">
<p> Month </p>
<select name="Bmonth">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
</select>
<p> Day </p>
<select name="Bdom">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p> Year </p>
<select name="Byear">
<option value="2015">2015</option>
<option value="2014">2015</option>
<option value="2013">1988</option>
</select></form>
<script>
function DOB(Bmonth, Bdom, Byear) {
var z=Byear-Bmonth*Bdom;
return window.alert("Your number is " +z);
}
DOB(Bmonth, Bdom, Byear);
</script>
I simply want to take the three values that the user provides and enter them into the function DOB(Bmonth, Bdom, Byear); If I run the code like this it says "Bmonth is undefined."
You could also use a javascript framework or library that will make your life easier. For instance, with jQuery you would adapt your code like so:
<form action="mywebsite.html">
<p> Month </p>
<select name="Bmonth">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
</select>
<p> Day </p>
<select name="Bdom">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p> Year </p>
<select name="Byear">
<option value="2015">2015</option>
<option value="2014">2015</option>
<option value="2013">1988</option>
</select></form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function DOB(Bmonth, Bdom, Byear) {
var z=Byear-Bmonth*Bdom;
return window.alert("Your number is " +z);
}
DOB(
$('[name="Bmonth"]').val(),
$('[name="Bdom"]').val(),
$('[name="Byear"]').val()
);
</script>
And with some further tweakings (adding a button to trigger DOB function and using ids instead of name): http://jsfiddle.net/neewonej/
First of all change name="" to id="" to make simpler with javascript selection. Which looks like this:
<form action="mywebsite.html">
<p> Month </p>
<select id="Bmonth">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
</select>
<p> Day </p>
<select id="Bdom">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p> Year </p>
<select id="Byear">
<option value="2015">2015</option>
<option value="2014">2015</option>
<option value="2013">1988</option>
</select></form>
You need to get the handle of the select box to tempElement variable using tempElement = document.getElementById("Bmonth"). Then get the selected index using tempElement.selectedIndex and make this index to retrieve value from tempElement.options. Use tempElement.options[tempElement.selectedIndex].value to get the value equivalent that user selects otherwise use tempElement.options[tempElement.selectedIndex].text to get the selected text.
Here is the working javascript code:
function DOB(Bmonth, Bdom, Byear) {
var z=Byear-Bmonth*Bdom;
return window.alert("Your number is " +z);
}
var tempElement = document.getElementById("Bmonth");
Bmonth = tempElement.options[tempElement.selectedIndex].value;
tempElement = document.getElementById("Bdom");
Bdom = tempElement.options[tempElement.selectedIndex].value;
tempElement = document.getElementById("Byear");
Byear = tempElement.options[tempElement.selectedIndex].value;
DOB(Bmonth, Bdom, Byear);
Thanks
I am having trouble to store all the selected options as a list, my code only sotres the first selected option and ignores the rest. How can I solve this problems?
<label for="itemlist">Items</label>
<br>
<select id="itemlist" name="itemlist" multiple="multiple" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<script type="text/javascript">
$(function() {
$('#itemlist').change(function() {
console.log($(this).val());
}).multipleSelect({
width: '100%'
});
});
</script>
Gus,
As you are using it jQuery already $('selector').val(), this will retreive (comma separated) all values selected on the select tag.
Here is an example I've wrote for you using the .on('click', function).
FIDDLE
Hope this helps!
I am beginner with jQuery. I want to use drop down in my page. Depending upon the selection of drop down value, no of text boxes should appear in page. Suppose I selected 8 than 8 text boxes appear and if then I select 4 than rest four should be removed. Please give me idea how to do it using jQuery.
jQuery('#select').change(function() {
var num = jQuery(this).val();
jQuery('.textboxes').remove();
for(i=0;i<num;i++)
{
jQuery("<input type='text' class='textboxes' />").appendTo("body");
}
});
Here select is the id of the selectbox.
Rahul you are asking for an idea so here it is. Using jQuery you can find the value of a drop down or select element and use that value to simply append new text boxes. I would suggest not to create elements but insert html for those elements.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<select name="select" id="select">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="textbox-container"></div>
<script>
$(document).ready(function() {
$('#select').change(function() {
var num = $('#select').val();
$('.textboxes').remove();
var textBoxesStr = '';
for (i = 0; i < num; i++) {
textBoxesStr = textBoxesStr + "<input type='text' class='textboxes' />";
}
$("#textbox-container").append(textBoxesStr);
});
});
</script>
Code given above works for me.
<html>
<head>
<title>Dynamic Form</title>
<script language="javascript">
function changeIt()
{
document.getElementById("my_div").innerHTML="";
var num=document.getElementById("select").options[document.getElementById("select").selectedIndex].value;
for(i=0;i<num;i++)
{
my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext'+ i>"
}
}
</script>
</head>
<body>
<form name="form" action="post" method="">
<select name="select" id="select">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<input type="button" value="test" onclick="changeIt()">
<div id="my_div"></div>
</form>
</body>
</html>
I have an external Javascript file and i am trying to alert the value of select tag.
My <select> code looks like this:
<select id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="vote" onclick="castvote();">
and the Javascript (which is external):
function castvote()
{
alert(document.vote.options[document.vote.selectedIndex].value);
}
But I get the error "document.vote is undefined".
Can someone help me with this.
Best
Zeeshan
If selecting by Id, you should use :
function castvote() {
var sel = document.getElementById("vote");
alert(sel.options[sel.selectedIndex].value);
}
Easy way, change your code so that your form field has a name attribute:
<select name="vote" id="vote">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="vote" onclick="castvote();">
Better way, change your javascript so it is retreiving the select box by its ID rather than through the document object:
function castvote() {
var mySelect = document.getElementById("vote");
alert(mySelect.options[mySelect.selectedIndex].value);
}