I have to write some code where in a select there are three options and the value of a div will change to the selected item's value when it is changed, I have tried quite a lot of methods and functions but nothing worked. this is my current code :
$('select[class="country"]').on('change', function () {
var get = $('select option:selected').text();
$('#fDiv').text = get;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The coolest country</h1>
<select name="country"id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>
Please share any ideas of what could be wrong with this code.
use .text() like : $('#fDiv').text(myText);
$('select[class="country"]').on('change', function() {
var myText = $('select option:selected').text();
$('#fDiv').text(myText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The coolest country</h1>
<select name="country" id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>
With jQuery, you don't use the assignment =, you use it like ('#id').text(get):
$('select[class="country"]').on('change', function() {
var get = $('select option:selected').val();
$('#fDiv').text(get);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>The coolest country</h1>
<select name="country" id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>
Here is a pure javascript solution to your issue.
const select = document.querySelector('#country');
const div = document.querySelector('#fDiv');
div.innerHTML = select.selectedOptions[0].value // remove this if you dont want a value set initially
select.addEventListener('change', (event) => {
div.innerHTML = select.selectedOptions[0].value
});
<h1>The coolest country</h1>
<select name="country"id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>
1) Add <html> at the start of your file
2) Add a space in between name = "country" id="country"
3) Use text() with a parameter: such as $('#fDiv').text(get);
$('select[class="country"]').on('change', function () {
var get = $('select option:selected').text();
$('#fDiv').text(get);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Cool Site</title>
</head>
<body>
<h1>The coolest country</h1>
<select name="country" id="country" class="country">
<option value="Korea">Korea</option>
<option value="China">China</option>
<option value="Romania">Romania</option>
</select>
<div id="fDiv"></div>
</body>
</html>
Related
I have select tag below:
<select name="selID" id="selID" data-mini="true"">
<option value="1" selected="selected">Tithes</option>
<option value="2">Offering</option>
<option value="3">Designated</option>
<option class="selOptAddMore" value="0">Add More...</option>
</select>
I want to change value when one of the options is selected except for "Add More..."
Sorry I'm a newbie. Thanks in advance.
You can try this:
The HTML:
<body>
Result: <p id="result"></p>
<select name="selID" id="selID" data-mini="true" onchange="test()">
<option value="1" selected="selected">Tithes</option>
<option value="2">Offering</option>
<option value="3">Designated</option>
<option class="selOptAddMore" value="0">Add More...</option>
</select>
<script src="test.js"></script>
</body>
test.js:
function test() {
let listVal = document.getElementById("selID").value;
if (listVal != "0") {
document.getElementById("result").innerHTML = listVal;
}
else {
listVal = 1; // this is value for "Tithes"
document.getElementById("selID").value = listVal;
document.getElementById("result").innerHTML = listVal;
}
}
php file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.mark').change(function(){
var data= $(this).val();
alert(data);
});
</script>
</head>
<body >
<select class='mark' required>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
</body>
</html>
i want to change placeholder of a input textfield on selection of option.but to do that first of all jquery should be called but above code is not working please suggest me something.
i want to change placeholder of a input textfield on selection of option.but to do that first of all jquery should be called but above code is not working please suggest me something.
Use jQuery plugin
<select class='mark' required>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
Answer is
$(document).ready(function() {
$(".mark").on("change",function(){
var selected_value = $(this).val(); //get option tag value
var selected_text = $(this).find(":selected").text(); // get option tag text
alert(selected_value+" == "+selected_text); //print the result
});
});
might be you forgot add jQuery library, you can check following snippet for this
$('.mark').change(function(){
var data= $(this).val();
alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='mark' required>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
Its working fine, check here. I think you forget to add the jquery library in your code.
$('.mark').change(function(){
var data= $(this).val();
alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='mark' required>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
Check This Perfectly Working!
$('.mark').change(function(){
var data= $(this).val();
alert(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class='mark' required>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
Please try this:
$(document).on("change",".mark",function(){
var data= $(this).val();
alert(data);
});
You should ideally do this:
HTML code :
$(document).ready(function() {
$('#mark1').change(function() {
alert($(this).val());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<select class='mark' required id='mark1'>
<option value='' disabled selected>Marketplace </option>
<option value='Amazon' >Amazon</option>
<option value='Flipkart' >Flipkart</option>
</select>
</body>
</html>
I want when someone selects a country out of my list the province in that country show up in the second select bar is this possible within html? And if not how do I do it with javascript.
<!DOCTYPE html>
<html>
<head>
<title>Gegevens</title>
</head>
<body>
<center>
<h1>Gegevens</h1>
</center>
Land:
<select id="countries">
<option value="Holland">Holland</option>
<option value="Denmark">Denmark</option>
<option value="England">England</option>
<option value="Spain">Spain</option>
<option value="Italy">Italy</option>
</select><br>
Provincie:
<select> OPTIONS FOR HOLLAND
<option value="Gelderland">Gelderland</option>
<option value="Utrecht">Utrecht</option>
</select>
<select> OPTIONS FOR ENGLAND ETC...
<option value="Schotland">Schotland</option>
<option value="Wales">Wales</option>
</select>
<footer>Ga terug</footer>
</body>
</html>
You'll probably have to do this using JavaScript. I've edited your HTML a bit to make the selection process easier. There might be a way with HTML form elements, but try this:
var countrySelect = document.getElementById('countries'); //the main select
var countryClass = document.getElementsByClassName('country'); //the other selects
countrySelect.onchange = function(){
var selected = this.children[this.selectedIndex].value; //this is the value of the country select;
for(var i = 0; i < countryClass.length; i++)
countryClass[i].style.display = countryClass[i].id === selected ? 'block' : 'none';
}
<body>
<center>
<h1>Gegevens</h1>
</center>
Land:
<select id="countries">
<option disabled selected>Select Country</option>
<option value="Holland">Holland</option>
<option value="Denmark">Denmark</option>
<option value="England">England</option>
<option value="Spain">Spain</option>
<option value="Italy">Italy</option>
</select><br>
Provincie:
<select class="country" id="Holland" style="display:none;">
<option disabled selected>Select Location</option>
<option value="Gelderland">Gelderland</option>
<option value="Utrecht">Utrecht</option>
</select>
<select class="country" id="England" style="display:none;">
<option disabled selected>Select Location</option>
<option value="Schotland">Schotland</option>
<option value="Wales">Wales</option>
</select>
</body>
I am not sure about the html way but the jquery way is pretty easy.
Handle option selected of countries. Based on the country selected hide/show provinces:
$(document).ready(function(){
$('#countries').on('change',function(){
var selectedCountry = $(this).find('option:selected').text();
switch (selectedCountry){
case 'Holland':
// hide show provice
break;
//etc
}
});
});
You need to use JS and play with elements display property.
After user selects a country hide province select (code snippet below hides all selects sharing toggle class), then identify which country was selected and show the province select for that country. Voilà!
<!DOCTYPE html>
<html>
<head>
<title>Gegevens</title>
</head>
<body>
<center>
<h1>Gegevens</h1>
</center>
Land:
<select id="countrySelect" onchange="toggleCountry()">
<option value="Holland">Holland</option>
<option value="England">England</option>
</select><br>
Provincie:
<select id="provinceHolland" class="toggle">
<option value="Gelderland">Gelderland</option>
<option value="Utrecht">Utrecht</option>
</select>
<select id="provinceEngland" class="toggle" style="display:none">
<option value="Schotland">Schotland</option>
<option value="Wales">Wales</option>
</select>
<footer>Ga terug</footer>
<script>
function toggleCountry() {
var list = document.getElementsByClassName("toggle");
for (var i = 0; i < list.length; i++) {
list[i].style.display = "none";
}
var sub = "province" + document.getElementById("countrySelect").value;
document.getElementById(sub).style.display = "inline";
}
</script>
</body>
<!DOCTYPE html>
<html>
<head>
<title>NYC MTA</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p>Line N</p>
Dropdown Button
<select id ="Select">
<option id="Select">Times Square</option>
<option id="34th">34th</option>
<option id="28th">28th</option>
<option id="23th">23th</option>
<option id="23th">Union Square</option>
<option id="8th">8th</option>
</select>
<select>
<option id="Times Square">Times Square</option>
<option id="34t">34th</option>
<option id="28t">28th</option>
<option id="23t">23th</option>
<option id="23t">Union Square</option>
<option id="8t">8th</option>
</select>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
<script>
window.onload= function(){
var lnListeners = function(){
var ln = document.getElementById("Select");
if(ln){
ln.addEventListener('change', function(){alert("Do great stuff")});
}
lnListeners();
}
};
</script>
id="Select" should only be in the <select> element, not the <option> element. IDs have to be unique.
And you need to call lnListeners outside the definition of the function.
window.onload = function() {
var lnListeners = function() {
var ln = document.getElementById("Select");
if (ln) {
ln.addEventListener('change', function() {
alert("Do great stuff")
});
}
};
lnListeners();
};
<select id="Select">
<option id="Times Square">Times Square</option>
<option id="34th">34th</option>
<option id="28th">28th</option>
<option id="23th">23th</option>
<option id="23th">Union Square</option>
<option id="8th">8th</option>
</select>
In your case, you just have to call the function lnListeners(), outside its scope.
var lnListeners = function(){
var ln = document.getElementById("Select");
if(ln){
ln.addEventListener('change', function(){alert("Do great stuff")});
}
}
lnListeners();
<select id ="Select">
<option id="Select">Times Square</option>
<option id="34th">34th</option>
<option id="28th">28th</option>
<option id="23th">23th</option>
<option id="23th">Union Square</option>
<option id="8th">8th</option>
</select>
<select>
<option id="Times Square">Times Square</option>
<option id="34t">34th</option>
<option id="28t">28th</option>
<option id="23t">23th</option>
<option id="23t">Union Square</option>
<option id="8t">8th</option>
</select>
How can I amend the code so that when I select a option from the first drop down menu the second drop down menu becomes editable otherwise the second drop-down menu should be read only, and if the option in the first drop down menu is "default" then the second drop down menu should be read only.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function mySecondFunction() {
document.getElementById("mySelection").disabled = false;
}
</script>
</head>
<body>
<form action="">
<select name="cars" onload="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select disabled name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
</html>
Look at the capitals:
document.getElementById("MySelection").disabled = false;
<select disabled name="cars" id="mySelection">
The first is with "M" and the seccond with "m"
You have misspelled MySelection with mySelection
In the JS you have document.getElementById("MySelection") // notice the uppercase M
and in the HTML you have id="mySelection"
Also set the second select to false when the window loads and add a onChange event to the first select that will set the second event to enabled/true... it this what you want?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById("mySelection").disabled = true;
};
function mySecondFunction() {
document.getElementById("mySelection").disabled = false;
}
</script>
</head>
<body>
<form action="">
<select name="cars" onchange="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
</html>
You may want to set the second select back to disabled if the user selects 'default' in the first menu after changing the value
JavaScript selectors are case sensitive. Your mistake is at mySelection id:
document.getElementById("MySelection").disabled = false;
<select disabled name="cars" id="mySelection">
You must use that inside body tag .
fiddle
<head>
</head>
<body onload="mySecondFunction()">
<form action="">
<select name="cars" >
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
<select disabled name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
</body>
<script type="text/javascript">
function mySecondFunction() {
alert("aaa");
document.getElementById("mySelection").disabled = false;
}
</script>
</html>
As others pointed out you mispelled the id of the second <select> but also you used the wrong event, onchange is what you want instead of onload.
function mySecondFunction() {
document.getElementById('mySelection').disabled = false;
}
<form action="">
<select name="cars" onchange="mySecondFunction();">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br />
<select disabled="disabled" name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
But consider using jQuery and attach your events in javascript instead of having them stored in html.
Try this:
Replace
document.getElementById("mySelection").disabled = false;
with this
document.getElementById("mySelection").removeAttribute('disabled');
Also, you may want to change
onload="mySecondFunction()"
with this:
onchange="mySecondFunction()"
Hope this helps.
Change onload to onchange.
<select name="cars" onchange="mySecondFunction();">
if you want to remove the disable in a specific value like (Saab)
See fiddle
note: put the script in b4 the head tag
function mySecondFunction()
{
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "saab")
{
document.getElementById("mySelection").disabled = false;
}else {
document.getElementById("mySelection").disabled = true;
}
}
<form action="">
<select id="1" name="cars" onchange="mySecondFunction()">
<option value="default">default</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br />
<select disabled="disabled" name="cars" id="mySelection">
<option value="Action1">Volvo</option>
<option value="Action2">Saab</option>
<option value="Action3">Fiat</option>
<option value="Action4">Audi</option>
</select>
</form>
UPDATE
See fiddle
function mySecondFunction()
{
var ddl = document.getElementById("1");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "default")
{
document.getElementById("mySelection").disabled = true;
}else {
document.getElementById("mySelection").disabled = false;
}
}