This question already has answers here:
How to add the value of selectbox to a textbox?
(2 answers)
Closed 5 years ago.
How can I show the text of selectbox to each textbox based on selected event?
My code only shows the value of selectbox to textbox. I want to replace it with text of each option.
Here is my code:
var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');
selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
function handleChange(event)
{
if (event.target.id == "mySelect") {
document.getElementById('myInput').value = selectBox.value;
} else {
document.getElementById('myInput2').value = selectBox2.value;
}
}
<select id="mySelect">
<option value="Option 1"> this Text</option>
<option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
<option value="Option 1">this Text</option>
<option value="Option 2">this Text 2 </option>
</select>
<input type="text" id="myInput" />
<input type="text" id="myInput2" />
You can access the label of selected option using selectedOptions[0].text on select element.
var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');
selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
function handleChange(event)
{
if (event.target.id == "mySelect") {
document.getElementById('myInput').value = selectBox.selectedOptions[0].text;
} else {
document.getElementById('myInput2').value = selectBox2.selectedOptions[0].text;
}
}
// Set initial values:
document.getElementById('myInput').value = selectBox.selectedOptions[0].text;
document.getElementById('myInput2').value = selectBox2.selectedOptions[0].text;
<select id="mySelect">
<option value="Option 1"> this Text</option>
<option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
<option value="Option 1">this Text</option>
<option value="Option 2">this Text 2 </option>
</select>
<input type="text" id="myInput" />
<input type="text" id="myInput2" />
You'd use the textContent of the options instead of the value
var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');
selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
function handleChange(event) {
if (event.target.id == "mySelect") {
var index = selectBox.selectedIndex;
var option = selectBox.options[index]
document.getElementById('myInput').value = option.textContent;
} else {
var index = selectBox2.selectedIndex;
var option = selectBox2.options[index];
document.getElementById('myInput2').value = option.textContent;
}
}
<select id="mySelect">
<option value="Option 1"> this Text</option>
<option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
<option value="Option 1">this Text</option>
<option value="Option 2">this Text 2 </option>
</select>
<input type="text" id="myInput" />
<input type="text" id="myInput2" />
Or using jQuery
$('#mySelect, #mySelect2').on('change', function() {
$('#'+this.id.replace('mySelect', 'myInput')).val($('option:selected', this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
<option value="Option 1"> this Text</option>
<option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
<option value="Option 1">this Text</option>
<option value="Option 2">this Text 2 </option>
</select>
<input type="text" id="myInput" />
<input type="text" id="myInput2" />
$('.mySelect').change(function(){
var select_box_val = $(this).val();
$('#myInput').val(select_box_val)
});
Try the above code.
node.value is always going to read the value attribute of input .
you can just replace the value with the value you actually trying to pass .
Ex;
<option value="this Text">this Text</option>
<option value="this Text 2">this Text 2 </option>
Here you go,
in case you want the selected option instead just change .text to .value like,
document.getElementById('myInput').value = selectBox.options[selectBox.selectedIndex].value;
var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');
selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
function handleChange(event)
{
if (event.target.id == "mySelect") {
document.getElementById('myInput').value = selectBox.options[selectBox.selectedIndex].text;
} else {
document.getElementById('myInput2').value = document.getElementById('myInput2').value = selectBox2.options[selectBox2.selectedIndex].text;
}
}
<select id="mySelect">
<option value="Option 1"> this Text</option>
<option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
<option value="Option 1">this Text</option>
<option value="Option 2">this Text 2 </option>
</select>
<input type="text" id="myInput" />
<input type="text" id="myInput2" />
Related
i want to learn that when i select a value from select input how can i change the value of checkbox.
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
Why would you want to?
Anyway:
window.addEventListener("load", function() { // on page load
document.getElementById("myselectbox1").addEventListener("change", function() {
document.getElementById("mycheckbox1").value = this.value;
});
document.getElementById("mycheckbox1").addEventListener("change", function() {
console.log(this.value);
});
});
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
function updateCheckbox() {
var val = document.getElementById("myselectbox1").value;
document.getElementById("mycheckbox1").checked = true;
document.getElementById("mycheckbox1").value = val;
}
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select onChange="updateCheckbox()" name="cat-1" id="myselectbox1">
<option selected disabled>Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
may i ask one more question
i changed my checkbox value if i have one more select input which id cat-2
how can i change name of cat-2 to chosen value of cat-1
For example;
if i choose value1 ( its value=100)
i want to change name of cat-2 to cat-100
```
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
<select name="cat-2" id="myselectbox2">
<option value="">Choose</option>
<option value="300">Value3</option>
<option value="400">Value4</option>
</select>
```
I am trying to update a <select> element when I select one or multiple values from another <select multiple> using jQuery. Here's my multiple select:
<select class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
I hope this is what you are looking for,
$('select#first').change(function() {
$("select#second option:not(:first-child)").remove();
$(this).find("option:selected").each(function() {
$("select#second").append($(this).clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select name="second" id="second">
<option value=''>Select 2</select>
</select>
Check this script https://jsfiddle.net/gpb5wx8h/5/
Jquery:
function chooseItems(item, placeholder){
$(item).change(function() {
var item = $(this);
console.log(typeof(item.val()));
if(typeof item.val() == 'object'){
$.each(item.val(), function(i,v){
var selectedItem = item.find('option[value="'+ v +'"]'),
selectedText = selectedItem.text();
selectedItem.detach();
$(placeholder).append('<option value="' + v +'">' + selectedText + '</option>')
})
}
})
}
$(document).ready(function() {
chooseItems('.choose-role','.placeholder-role');
chooseItems('.placeholder-role','.choose-role');
})
HTML:
<select class="form-control choose-role" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select class="form-control placeholder-role" multiple>
</select>
If you want to update select options by fetching data from the server end regarding the selected values in multiple select box then you can perform ajax operation and insert the result to the another select box which is to be updated.
I have a table rows (this is not real, this is only example for simple it):
id, cat, company, device.
for example some recordes:
1, computer, samsung, ativ
2, computer, lg, blabla
3, phones, samsung, s6
4, phones, sony, z5
I want that if I choose category (computer for example) this will open only the company that they have computer, In addition, when the user select the second select, this will give the option that remain.
I found here the answer for the first select but for the second I did find.
I dont want to do "if ..., if ..." because this is need to be from the database and automatic.
This is the example that i did:
http://jsfiddle.net/e464etcq/
HTML:
<select class="form-control" id="type" name="type">
<option value="">choose</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<input type="text" id="billing">
JQUERY:
jQuery(function($) {
var backupShipStates = $("#reason").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
});
do you have any suggition how to do it?
Thank you,
Omry.
If I've understand you, you could add a new change event to handle when the second select is changed.
So your code would be:
HTML
<select class="form-control" id="type" name="type">
<option value="">בחר</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<select class="form-control" id="third" name="third">
<option value="">choose</option>
<option value="1" class="1">Option3.1</option>
<option value="2" class="1">Option3.2</option>
<option value="3" class="2">Option3.3</option>
<option value="3" class="2">Option3.4</option>
</select>
<input type="text" id="billing">
jQuery
jQuery(function($) {
var backupShipStates = $("#reason").html();
var backupOption3 = $("#third").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
$("#reason").change(function(){
var reason = $(this).val();
var options = $(backupOption3).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == reason; });
$("#third").html(options);
});
});
Here is not necessary PHP.
I have the following code which adds a bit of text below the select box when an item is selected. However it I can only get it to show the value of the select box. Is there any way I could get this to show a 3rd value?
<script type="text/javascript">
function dropdownTip(value){
console.log(value);
document.getElementById("result").innerHTML = value;
}</script>
<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected" value="1">Client 1</option>
<option value="2">Client 2</option>
<option value="3">Client 3</option>
<option value="4">Client 4</option>
</select>
<div id="result"></div>
For example, I would like to add something like "Always remember to ask for the full name" on client one, and "Never ask for last name" On client 2.
This should work:
<script type="text/javascript">
function dropdownTip(value){
var preamble = 'default preamble';
if(value == 'Client 2') {
preamble = 'Never ask for last name on ';
}
if (value == 'Client one') {
preamble = 'Always remember to ask for the full name';
}
console.log(value);
document.getElementById("result").innerHTML = preamble + value;
}</script>
<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
<option selected="selected" value="1">Client 1</option>
<option value="2">Client 2</option>
<option value="3">Client 3</option>
<option value="4">Client 4</option>
</select>
<div id="result"></div>
You could use html5 data-* attributes.
Working demo.
javascript:
window.dropdownTip = function (obj) {
console.log(obj);
console.log(obj.value);
var sel = obj.options[obj.selectedIndex];
console.log(sel.getAttribute('data-desc'));
document.getElementById("result").innerHTML = obj.value;
document.getElementById("result").innerHTML += sel.getAttribute('data-desc');
}
html:
<body>
<select onchange="dropdownTip(this);" name="search_type" id="selector">
<option selected="selected" value="1" data-desc="test 1">Client 1</option>
<option value="2" data-desc="test 2">Client 2</option>
<option value="3" data-desc="test 3">Client 3</option>
<option value="4" data-desc="test 4">Client 4</option>
</select>
<div id="result"></div>
</body>
I am designing affiliate program, in which each user has his own link-code aka tracking URL.
I am willing to add extra parameters to it depending on the drop down selection which will be different landing pages.
e.g.
original URL:
http://www.google.com/tracker/blah1
and if user selects value from down the URL should be like:
http://www.google.com/tracker/blah1/queryid/1
I am using this code for displaying the URL to the end user in the input box set as readonly.
<input size="100" type="text" value="<?=$url;?>" readonly> - <a target="_blank" href="<?=$url;?>">Link</a></b>
There's gonna be two drop down like these.
<select name="niche">
<option value="0" label="choose one">choose one</option>
<option value="/queryid/1" label="option 1">option 1</option>
<option value="/queryid/2" label="option 2">option 2</option>
<option value="/queryid/3" label="option 3">option 3</option>
<option value="/queryid/4" label="option 4">option 4</option>
<option value="/queryid/5" label="option 5">option 5</option>
<option value="/queryid/6" label="option 6">option 6</option>
</select>
By selecting option 1 it should add /queryid/1 to the end of the url.
if none is selected then no change will be there.
<select name="landingpage">
<option value="0" label="choose one">choose one</option>
<option value="/cid/1" label="landing 1">landing 1</option>
<option value="/cid/2" label="landing 2">landing 2</option>
</select>
By selecting landing 1 will add /cid/1 to the end of the URL.
if none is selected then no change will be there.
So how do I do this?
Update: updated the values of dropdown as currently using htaccess rewrite rules.
update:
I am using as specified by "Rishi Php" demo is here http://jsfiddle.net/g6U4a/2/
but by default its not showing SourceUrl
it should show the source URL by default, in the box but it shows it when user changes drop down values.
How can I achieve this?
update:
"Rishi Php" fixed the issue of on load default url.
here is the code. http://jsfiddle.net/g6U4a/3/
Thanks to all of you guys.
Don't forget to add this in header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
replaced
var SourceUrl = "http://www.google.com/?tracker=blah1";
with
var SourceUrl = "<?=$url;?>";
so each affiliate will have unique link
Try this... It 'll help. *UPDATED WORKING DEMO*
var SourceUrl = "http://www.google.com/?tracker=blah1";
var queryUrl = "";
var landingUrl = "";
$(function() {
$('#querySelct').on('change', function () {
if($(this).val() == 0) {
queryUrl = "";
} else {
queryUrl = $(this).val();
}
MakeUrl();
return false;
});
$('#landingSelect').on('change', function () {
if($(this).val() == 0) {
landingUrl = "";
} else {
landingUrl = $(this).val();
}
MakeUrl();
return false;
});
});
function MakeUrl() {
var finalUrl = SourceUrl + queryUrl + landingUrl;
$('#urlBox').val(finalUrl);
$('#MyLink').attr('href', finalUrl);
}
You can use getElementById to get the values from the <select> fields and set them into your textfield.
DEMO: http://jsfiddle.net/g6U4a/1/
HTML
<select id="queryid">
<option value="0" label="choose one">choose one</option>
<option value="&queryid=1" label="option 1">option 1</option>
<option value="&queryid=2" label="option 2">option 2</option>
<option value="&queryid=3" label="option 3">option 3</option>
<option value="&queryid=4" label="option 4">option 4</option>
<option value="&queryid=5" label="option 5">option 5</option>
<option value="&queryid=6" label="option 6">option 6</option>
</select>
<br>
<select id="cid" name="landingpage">
<option value="0" label="choose one">choose one</option>
<option value="&cid=1" label="landing 1">landing 1</option>
<option value="&cid=2" label="landing 2">landing 2</option>
</select>
<input type="button" id="change" value="Create URL" onclick="createUrl()" /><br>
<input type="text" id="result" placeholder="placeholder" readonly><br>
JAVASCRIPT
function createUrl() {
var google = "http://www.google.com/";
document.getElementById("result").value = google + document.getElementById("queryid").value + document.getElementById("cid").value;
}
You could do something like this:
<select id="yourSelect" name="landingpage">
<option value="" label="choose one">choose one</option>
<option value="www.yourdomain.com&cid=1" label="landing 1">landing 1</option>
<option value="www.yourdomain.com&cid=2" label="landing 2">landing 2</option>
</select>
$(function(){
$('#yourSelect').on('change', function () {
var url = $(this).val();
if (url) {
window.location = url;
}
return false;
});
});
Give selector for selectbox like
var urlToAppend1=$('#nicheId :selected').val();
originalurl='http://www.google.com/?tracker=blah1';
var url='';
url+=originalurl;
url+=urlToAppend;
Try it.
$(function(){
$('select').change(function() {
var arr = new Array();
$('select option:selected').each(function(){
var value = $(this).val();
if(value != "0"){
arr.push($(this).val());
}
});
// selected value are now concatenating here.
var str = arr.join('');
alert(str);
});
});