I currently have a drop down list with a few values in it, I was wondering if it is possible to have a image next to the drop down list that changes corresponding to the value in the drop down list?
This the code for my drop down list. If you need anymore information please ask.
<form id="formddl">
<a id="infoheader">GreenB Colour</a> <br><br>
<div class="header">
<select>
<option value="0">Ivory White</option>
<option value="1">Carbon Black</option>
</select>
</div> <br><br>
<script src="fancystyle1/js/jquery.simple.select.js"></script>
<script type="text/javascript">
$(function() {
$('select').selectBoxes();
});
</script>
</form>
You can do it like this:
$("#iama").children().click(function changeImage(){
var value = $("#iama option:selected").val();
if (value == 1){
$("#image").attr("src","http://lorempixel.com/400/200/");
}
else {
$("#image").attr("src","http://lorempixel.com/600/200/");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select id="iama">
<option value=1>image for value 1</option>
<option value=2>image for another value</option>
</select>
<img id ="image" src="http://lorempixel.com/200/200/"/>
Related
I want to use the dropdown menu on site.google to link different pages, but I don't know what to
write inside the value field in order to make this code functioning well. Could you please assist me to figure out how I can do that!
<!DOCTYPE html>
<html>
<body>
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="what do I have to write here!">Page 1</option>
<option value="#what do I have to write here!">Page 2</option>
<option value="#what do I have to write here!">Page 3</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</script>
</body>
</html>
You can create an anchor element and click it or use the window.open function with the _top parameter. Like so:
<body>
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="https://google.com">Google</option>
<option value="https://developers.google.com/">Developers</option>
<option value="https://developers.google.com/apps-script">Apps Script</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
<script>
const list = document.getElementById('list')
function goToNewPage(){
// Alternative 1 window.open(list.value, '_top')
// Alternative 2
const a = document.createElement('a')
a.href = list.value
a.target = '_blank'
a.click()
}
</script>
</body>
I have a simple dropdown list with the first option selected and disabled and two other options
when I click on "Submit" and the dropdown is shown I get the value of the dropdown
When the dropdown list is hidden I always get the value "null" even when I trying to set the value to a string "None" with $("#select").val("None") commmand
How can I set the value to "None" after hiding the dropdown list ?
===== Code output: ====
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
$("select").hide();
$("select").val("None");
});
$(".btn2").click(function(){
$("p").show();
$("select").show();
$("#select option:first").prop("selected", true);
});
$("#btnSmbt").click(function() {
$("#select").val("None");
alert($("#select").val());
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<select id="select">
<option value="" disabled selected>Select Number</option>
<option value"1">1</option>
<option value"2">2</option>
</select>
<br><br>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<br><br>
<button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>
</body>
</html>
There's a couple of issues in your code. Firstly the HTML has some errors in the option elements; you're missing the = between the value attribute and the value you provide.
Secondly, in the jQuery code you're setting the value of 'None' to the select, yet no option it contains has that value. I presume you're trying to select the first option element so that should be an empty string instead: .val('').
Lastly you alert() the value after you re-set it back to the default. This is why you always see nothing in the alert itself. Swap those lines around.
With that said, try this:
$(document).ready(function() {
$(".btn1").click(function() {
$("p").hide();
$("select").hide();
$("select").val('');
});
$(".btn2").click(function() {
$("p").show();
$("select").show();
$("select").val('');
});
$("#btnSmbt").click(function() {
alert($("#select").val());
$("#select").val('');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<select id="select">
<option value="" disabled selected>Select Number</option>
<option value="1">1</option>
<option value="2">2</option>
</select><br><br>
<button class="btn1">Hide</button>
<button class="btn2">Show</button><br><br>
<button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>
"None" is not existing value in your select option , thus it'll give you null
Also you html value options misses the =
In order to get a value you have to set an existing value between those option by example 1 or 2 as your example shows see below snippet:
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
$("select").hide();
$("select").val("1");
});
$(".btn2").click(function(){
$("p").show();
$("select").show();
$("#select option:first").prop("selected", true);
});
$("#btnSmbt").click(function() {
$("#select").val();
alert($("#select").val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<select id="select">
<option value="" disabled selected>Select Number</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<br><br>
<button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>
In addition to the other answers, note that disabled controls do not have values.
So your first option, which is disabled, will always give the value null regardless of its actual value
See the snippet for a demonstration of two select, one with disabled entry.
console.log($("#select1").val())
console.log($("#select2").val())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
<option value="anyvalue" disabled selected>Select Number</option>
</select>
<select id="select2">
<option value="anyvalue" selected>Select Number</option>
</select>
The actual issue in your code is likely (as pointed out in other answers) due to clearing it before displaying it. But for future reference if anyone tries to get a values of a disabled option, this would be the cause of it giving null.
This question already has answers here:
Drop-down box dependent on the option selected in another drop-down box
(8 answers)
Closed 2 years ago.
I have a dropdown with values A and B. I need to get another dropdown with a set of values 1,2,3,4 only if I change any value in my dropdown ('mySelect'). I need not change the value based on the selection. I just need to display another dropdown ('newSelect').
Dropdown 1:
<select id="mySelect" title="" disabled="disabled">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
If I change the value of dropdown 1, I need to get another dropdown(dropdown 2)
Dropdown 2:
<select id="newSelect" title="" disabled="disabled">
<option value="">Select</option>
<option value="1">Open</option>
<option value="2">Closed</option>
<option value="3">Reopen</option>
<option value="4">InProgress</option>
</select>
Please advice me how to achieve this.
Start your newSelect as hidden:
<select id="newSelect" title="" disabled="disabled" style="display: none">
...
</select>
Tell mySelect to show newSelect whenever mySelect is changed:
$('#mySelect').on('change', function() {
$('#newSelect').show();
});
There are multiple options. I believe you just want to display another dropdown if user selects any value from the first menu.
You can use onChange function and display second menu. For testing purpose, i have removed disabled attribute.
const subMenu = document.getElementById("newSelect");
const mainMenu = document.getElementById("mySelect");
window.onload = function() {
subMenu.style.display = "none";
}
mainMenu.onchange = function () {
subMenu.style.display = "block";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="mySelect" title="">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<select id="newSelect" title="" >
<option value="">Select</option>
<option value="1">Open</option>
<option value="2">Closed</option>
<option value="3">Reopen</option>
<option value="4">InProgress</option>
</select>
</body>
</html>
I think this is what you were hoping for, where the second dropdown is shown when the first is not left unselected (i.e. has a value of 'Select'). If you only want the second dropdown to be shown on a specific choice in the first dropdown then you can change the following line:
if ($("#mySelect option:selected").text() == "Select") {
To this (remember to replace YOUR_VALUE), here we would be checking if the value is not equal to YOUR_VALUE and therefore hide the second dropdown:
if ($("#mySelect option:selected").text() != "YOUR_VALUE") {
Let me know if you needed anything else.
Ollie
// Hide select on load
$("#newSelect").hide();
// Add event to change of first select
$("#mySelect").change(function() {
// Check if selected option is 'Select'
if ($("#mySelect option:selected").text() == "Select") {
// Hide the second dropdown if the first dropdown is 'Select'
$("#newSelect").hide();
} else {
// Show the second dropdown if the first is not equal to 'Select'
$("#newSelect").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select id="mySelect" title="">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
<div>
If I change the value of dropdown 1, I need to get another dropdown(dropdown 2) Dropdown 2:
</div>
<div>
<select id="newSelect" title="" disabled="disabled">
<option value="">Select</option>
<option value="1">Open</option>
<option value="2">Closed</option>
<option value="3">Reopen</option>
<option value="4">InProgress</option>
</select>
</div>
I have the following code:
<div class="form__group form__group--select" id="choice">
<select name="area" class="selectbox form__element">
<option selected="selected" value="">Sparte auswählen</option>
<option value="Erdgas">Erdgas</option>
<option value="Strom">Strom</option>
<option value="Telekommunikation">Telekommunikation</option>
<option value="Energiedienstleistungen">Energiedienstleistungen</option>
</select>
<div class="form__message">
<div class="form__infotext"></div>
<div class="form__error"></div>
</div>
</div>
</div>
<div class="columns medium-6" id="kWh">
<t:optionalTextField label="Ihr Jahresverbrauch in kWh" name="kWhPerYear" maxLength="100"/>
</div>
I would like to make "columns medium-6" be visible only if particular item is selected in "selectbox form__element", for example "Strom". Just to mention that this code is taken from .jsp file in which there are no 'head' and 'body' tags.
I already tried this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#choice").change(function() {
if ($(this).val() == "Erdgas" || (this).val() == "Strom") {
$("#kWh").show();
}else{
$("#kWh").hide();
}
});
});
</script>
but it didn't work....I probably missed something, and also I don't know ehre is the best place to put this javascript code.
You need an onchange event on your select:
<select name="area" class="selectbox form__element" onchange="hideColMed6(this)">
Add a script tag with the particular function:
<script type="text/javascript">
function hideColMed6(selected) {
var value = selected.value;
if (value == "Strom")
$(".columns.medium-6").hide();
else
$(".columns.medium-6").show();
}
</script>
I updated the code.
Try below code and its working fine.
$(document).ready(function (){
$(".selectbox").change(function() {
if ($(this).val() == "Erdgas" || $(this).val() == "Strom") {
$("#kWh").show();
}else{
$("#kWh").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form__group form__group--select" id="choice">
<select name="area" class="selectbox form__element">
<option selected="selected" value="">Sparte auswählen</option>
<option value="Erdgas">Erdgas</option>
<option value="Strom">Strom</option>
<option value="Telekommunikation">Telekommunikation</option>
<option value="Energiedienstleistungen">Energiedienstleistungen</option>
</select>
<div class="form__message">
<div class="form__infotext"></div>
<div class="form__error"></div>
</div>
</div>
<div class="columns medium-6" id="kWh">
<label name="kWhPerYear" maxLength="100">Ihr Jahresverbrauch in kWh</label>
</div>
You can use JQuery in order to achieve this, but you have to listen for changes on the select tag, not on the div one:
<script>
$('#select_field_id').change(function() {
var selectionText = $('#select_field_id').find(":selected").text();
if (selectionText == 'something') {
$('.columns.medium-6).show();
} else {
$('.columns.medium-6).hide();
}
});
</script>
This way you listen to changes on the select box and act accordingly.
So I am trying to have a page on my site that contains 2 drop down boxes and a submit button. The submit button will point to a URL when clicked and then that will take them to a new page.
The URL will be based on whatever is selected in the drop down menus.
For example:
Drop down 1 has options A and B
Drop down 2 has options 1 and 2
Then there would be a different url for each combination
A1 points to URL-1
A2 points to URL-2
B1 points to URL-3
B2 points to URL-4
I really don't know much about coding and have been searching for a way to do this for the last 3 hours and I just don't even know how to google it. I really appreciate any help I can get at this point. Thank you in advance! :)
Here is the code from my drop boxes. I edited the options to match the example with the A, B, 1, and 2.
<html>
<body>
<form>
<select id="list1t">
<option>Select one</option>
<option>A</option>
<option>B</option>
</select>
</form>
<form>
<select id="list2">
<option>Select one</option>
<option>1</option>
<option>2</option>
</select>
</form>
</body>
</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var url;
$(function(){
$('#link').click(function(){
var val1=$('#first').val();
var val2=$('#second').val();
if(val1=='A'){
if(val2=='1'){
url="URL1";
}
else{
url="URL2";
}
}else{
if(val2=='1'){
url="URL3";
}
else{
url="URL4";
}
}
window.location.href=url;
});
});
</script>
the html would be
<select id="first">
<option value="A" selected>A</option>
<option value="B">B</option>
</select>
<select id="second">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
you can use a link for clicking . no need of form or submit button
BUTTON