i want when selected option color from dropdown list then displaye selected text in id="name_text"
i could not change Html form code I want only when selected option then display text selected
my code is not work :(
<select id="property-transection" name="property-transection">
<option value=""></option>
<option value="53"> Blue </option>
<option value="24"> Green </option>
<option value="31"> Black </option>
</select>
<div id="name_txt">You selected (BLUE Or Green Or Black)</div>
<script>
$(document).on('change', '#property-transection', function() {
$('#name_txt').text($(this).val());
var po = this.val();
if( po = '53'){
var vb="BLUE COLOR SELECTED";
$('#noate_o').text(vb);
}
});
</script>
This should work for you:
<select id="property-transaction" name="property-transaction">
<option value=""></option>
<option value="53">Blue</option>
<option value="24">Green</option>
<option value="31">Black</option>
</select>
<div id="name_txt">Color Name Populates Here</div>
<script>
$(document).on('change', '#property-transaction', function() {
$('#name_txt').text($('#property-transaction option:selected').text());
});
</script>
Here's a working example:
https://jsfiddle.net/w73bzgos/2/
Related
I'm trying to get multiple drop down boxes to open when selecting different prompts from an original drop down menu.
So for example the original drop box would say "Continent" then drop down to a list of continents, when you select a continent a new box opens that asks you "Country" then you select a country and a new drop box opens to select a state.
I've been using this template
<script type="text/javascript">
function CheckDepartment(val){
var element=document.getElementById('othercolor');
if(val=='others')
element.style.display='block';
else
element.style.display='none';}
function CheckOption(val){
var element=document.getElementById('misc')
if(val=='misc')
element.style.display='block';
else
element.style.display='block';
}
</script>
</head>
<body>
<select name="color" onchange='CheckDepartment(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<select name="othercolor" id="othercolor" onchange='CheckOption(this.value)' style='display:none;'/>
<option value=""></option>
<option value="hi">hi</option>
<option value="misc" id="misc" >misc</option>
</select>
<select name="third" style='display:none;'>
<option value=""></option>
<option value="first">first</option>
<option value="second">second</option>
</select>
but I can't get a third drop box to open when selecting an option from the second drop box.
edit: third box. I think i deleted my last try so this was kinda a recreation of it from what I remembered. I'm also incredibly new at all of this and don't know if anything I tried makes sense.
Here's a simplified demo.
(It assumes only a "yes" value should trigger the display of the next dependent dropdown.)
const
select1 = document.getElementById("select1"),
select2 = document.getElementById("select2");
document.addEventListener("change", handleDropdownDisplay);
function handleDropdownDisplay(event) {
let changedElement = event.target;
if ((changedElement != select1) && (changedElement != select2)) {
return;
}
if (changedElement.value == "yes") {
changedElement.parentElement.nextElementSibling.classList.remove("hidden");
} else {
changedElement.parentElement.nextElementSibling.classList.add("hidden");
}
}
div {
margin-bottom: 0.5em;
}
.hidden {
display: none;
}
<div>
<label for="select1">Show level 2?</label>
<select id="select1">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select2">Show level 3?</label>
<select id="select2">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="hidden">
<label for="select3">Would your rather</label>
<select id="select3">
<option value="brains">Eat monkey brains</option>
<option value="vba">Write code in VBA</option>
</select>
</div>
(Btw, level 3 doesn't automatically become hidden whenever level 2 becomes hidden. This is probably functionality you'll want to add.)
I have some issues with options, can someone help me ?
I have a button with id="colorButton" but I don't know how to change his color with options.
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
It can be a javascript answer, jquery... please :(
I have this in script :
$(document).ready(function(){
if ($("#colorSelect").click().val("1"){
$("#testButton").css("color", "red");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But ofc it don't work :(
Your code contains lots bugs, you just need to bind a change event handler and set color based on selected option.
$(document).ready(function() {
$("#colorSelect").change(function() {
$("#testButton").css("color", $(':selected', this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
<div id="testButton">button</div>
You need to bind to the change event of the select like:
$(document).ready(function() {
$("#colorSelect").change(function() {
if ($(this).val() == 1) $("#testButton").css("color", "red");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
<button id="testButton">button</button>
Everyone is focusing on making your code functional. I put the effort to solve your problem in different way.
Each option has data-color attribute. When you change dropdown then selected option's data-color value get picked and changes color. In this way, you don't need multiple if-else.
$(document).ready(function() {
$('#colorSelect').on('change', function(){
var color = $(this).find(':selected').data('color');
$("#testButton").css("color", color);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option data-color='red'>Red</option>
<option data-color='blue'>Blue</option>
<option data-color='green'>Green</option>
</select>
<button id="testButton">button</button>
</form>
How to change the contents of 2nd select box based on value of first select box. no jQuery but only JavaScript enable second select box based on various inputs from 1st select box(div2) only JavaScript no jQuery no inner HTML if switch used.
<script> //javascript
function showHide(elem) {
if(elem.selectedIndex != 0) {
//hide the divs
for(var i=0; i < divsO.length; i++) {
divsO[i].style.display = 'none';
}
//unhide the selected div
document.getElementById('div'+elem.value).style.display = 'block';
}
}
window.onload=function() {
//get the divs to show/hide
divsO = document.getElementById("details").getElementsByTagName('div');
disO = document.getElementById("details").getElementsByTagName('di');
}
</script>
<div id="div2"> //select boxes
<select size="1" id="rambo" name="comm-name" selected="selected" onchange="showhide(this)" >
<option value="" selected="selected">-Select Office-</option>
<option value="3">HEAD OFFICE</option><option value="4">REGIONAL OFFICE</option>
<option value="5">DIVISIONAL OFFICE</option><option value="6">BRANCH OFFICE</option>
<option value="7">SERVICE CENTER</option><option value="8">EXTENSION COUNTER</option>
<option value="9">Show div 9</option><option value="10">Show div 10</option>
<option value="11">Show div 11</option><option value="12">Show div 12</option>
<option value="13">Show div 13</option><option value="14">Show div 14</option>
<option value="15">Show div 15</option><option value="16">Show div 16</option>
<option value="17">Show div 17</option><option value="17">Show div 18</option>
<option value="19">Show div 19</option><option value="18">Show div 20</option>
<option value="21">Show div 21</option>
</select>
</div>
<div id="di21"> <select name="" >
<option value="">Select an option</option>
<option value="4">Show div 4</option>
<option value="5">Show div 5</option>
<option value="6">Show div 6</option>
</select>This </div>
..... so on
//And this is asking me time and again to add some context to explain the code.. I do not know what to do ?
// the JavaScript function above opens up a new select box each time I change the option in the first select box.
Here is the Fidle
I simplified your html just for testing purpose and in function SetSel(elem) you can always write custom code to select second combo value as per logic
I want to use this function to work on all my drop down lists. Problem: the first drop down works okay, but hen I try select any option in the 2nd drop down selections. It places the value from the first group in the span of the second group. I want the span to have the value from its own group. I would like to use this on multiple groups.
<script>function displayResult(xspan,xselect)
{
var x=document.getElementById(xselect).selectedIndex;
alert(x);
var newTxt = document.getElementsByTagName("option")[x].value;
document.getElementById(xspan).innerHTML = newTxt;
//alert(document.getElementsByTagName("option").length);
}
</script>
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
<option value="">Phone Numbers</option>
<optgroup label="Shipping">
<option value=" - 800-463-3339">FedEx</option>
<option value=""></option>
</optgroup>
</select>
<span id="ShowPhone"></span>
<select id="myParts" onchange="displayResult('ShowParts','myParts')">
<option value="">Qik Parts list</option>
<optgroup label="BATT">
<option value="1">1</option>
<option value="2">1</option>
<option value="2">1</option>
<option value="2"><1/option>
</optgroup>
</select>
<span id="ShowParts"></span>
Chage the id and the displayResult of the second dropdown:
First dropdown:
<select id="myPhones" onchange="displayResult('ShowPhone','myPhones')">
Second dropdown:
<select id="NewNameID" onchange="displayResult('ShowPhone','NewNameID')">
I have a grid in asp.net. In this grid I am adding paging. In the paging footer I am showing a dropdown dynamically. The drop down contains the values (10,25,50,100). Now I want to capture the dropdown value and according to that value I want to do some change page styles. But here I am not getting any id of the dropdown list.
Here is my select code
<select style="text-align:right;" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$dgBatting$ctl13$ctl26\',\'\')', 0)" name="ctl00$ContentPlaceHolder1$dgBatting$ctl13$ctl26">
<option value="10" selected="selected">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
Html:
<select id="ftselect">
<option value="MostRecent">MostRecent</option>
<option value="MostLiked">MostLiked</option>
<option value="Relavance">Relavance</option>
<option value="MostViewed">MostViewed</option> </select>
Jquery:
$("select").change(function () {
$("select option:selected").each(function () {
str = $(this).text();
});
})
.change();