Develop Reference

Change css based in Select option value selected

I have in one form, one selects with one question that if determined value selected I need to display none the next question. How can I make a jquery code that detects that the user selected a determinated option in select and change the CSS of the page?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

So as far as I understand with your short description you need to do something based on the value selected by user in select box which we call an event onchange.I am writing a code example for you
<select onchange="somefunction($(this).val())">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<script>
function somefunction(value){
if(value == 1){
$("body").css("background-color","red");
}
if(value == 2){
$("body").css("background-color","yellow");
}
}
</script>

Your question is a bit vague, but i think this is what your after:
const value = $('#selectID option[value=""]').prop("selected", true);
if (value....") {
// do css stuff
}
Additionally you can get the value / text like so:
<select id="car_manufacturer">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<script>
const element = document.getElementById("car_manufacturer");
const value = element.options[element.selectedIndex].value;
const text = element.options[element.selectedIndex].text;
</script>
You could extend on the above with a on onchange event on the select element.
<select id="car_manufacturer" onchange="selectManufacturer(this)">
Manipulate CSS:
JavaScript:
document.body.style.backgroundColor = "red";
jQuery:
$("body").css("background-color","red");
Fiddle
onchange example with css manipulation:
http://jsfiddle.net/9L0czmeq/

iterate through select dropdowns with same class name to find selection of specific option [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to search through a select boxes with same class name, to discover if anyone has selected a specific option...
<select class='myclass' id='instance1'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class='myclass' id='instance2'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class='myclass' id='instance3'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<script>
$('.myclass').each(function(i, obj) {
// if anyone wants an audi, let me know
if (something == 'audi')
alert("found!");
});

Simply take all selected options with :selected pseudo, and filter them by value. This is cool and clean one liner.
$('.myclass option:selected').filter("[value=audi]")
Afterwards, you can grab this in a variable, and check if length > 0. (so you have a selected audi option).

This way:
$('.myclass').each(function(i, obj) {
// if anyone wants an audi, let me know
if (obj.value() == 'audi')
alert("found!");
});
you may need to use the JS code in a function though :)

$('#check').click(function(){
$('.myclass').each(function(i, obj) {
// if anyone wants an audi, let me know
if (obj.value== 'audi'){
alert("found!");
}else{
alert('Not found');
}
});});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="check">Check</button>
<select class='myclass' id='instance1'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class='myclass' id='instance2'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class='myclass' id='instance3'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

You will need a button to handle the detection or alternatively you can bind to the select change event handler and handle the newly selected option.
To achieve it via a button click, add the following to your HTML.
<button id="checkSelected">Check for Audi</button>
And then in your JavaScript/jQuery code:
$("#checkSelected").on("click", function() {
$("select[class='myclass'] option:selected").each(function() {
var element = $(this);
if (element.val() === "audi") {
alert('The user has selected an Audi in combobox ' + element.parent().attr("id"));
}
});
});
This will transverse the DOM and select all selected elements for the comboboxes with the class myclass and check if the value is equal to audi and alert the user which box they selected it from.
http://jsfiddle.net/0w0v06et/

Javascript - show TextField when select choice is

I'm new in JavaScript and I have following issue.
In my HTML code is ordinary SELECT
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
I need to show TextFied under the SELECT only when user select choice Audi.
<input type="text" name="something">
What is the best way to do that?

Start using JQuery (JQuery).
Here is the javascript:
$(document).ready(function(){
// On Select option changed
$("#someId").change(function(){
// Check if current value is "audi"
if($(this).val() === "audi"){
// Show input field
$("#textInputId").show(); //This changes display to block
}else{
// Hide input field
$("#textInputId").hide();
}
});
});
Here is the HTML
<select id="someId">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="text" style="display:none;" id="textInputId" name="someName"/>
Here is the example on JSFiddle:
EXAMPLE

Do this:
<select id="select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="hidden" id="txt" name="something">
And do something like this:
select.onchange=function(){
if(select.value=="audi"){
txt.type="text";
}
}
Demo:http://jsfiddle.net/943xQ/

you can achieve it easily using jquery like this:
here is the Html:
<select id="cars">
<option value="-1">Select One</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
and text field:
<input type="text" name="something" id="txtCar" style="display:none;">
$('select#cars').change(function(){
if($(this).val() == "audi")
{
$('input#txtCar').show();
}
});
Here is the DEMO

Place this at the bottom of the page (provided you already have included jquery into this page):
<script>
$('select').change(function () {
if ($(this).val() == 'audi') {
$(this).parent().append('<input type="hidden" name="something">');
}
});
</script>

You can attach the onchange event at select tag and can perform the action you want. Something like
HTML
<div id="result">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
JS
var select = document.getElementById("mySelect");
select.addEventListener("change", function() {
if(this.options[this.selectedIndex].value == 'audi'){
var input = document.createElement('input');
input.type="text";
input.id="txt";
input.name="something";
document.getElementById('result').appendChild(input);
}
});
DEMO

Given the posted HTML, in which you use no specific identifiers (class or id) to identify the relevant elements, and given that you've not specified the availability of any JavaScript library, I'd suggest the following 'plain' JavaScript solution:
function showInputWhen(evt,val){
var el = evt.target;
el.nextElementSibling.style.display = el.value.toLowerCase() == val.toLowerCase() ? 'inline-block' : 'none';
};
var selectEl = document.querySelector('select');
selectEl.addEventListener('change', function(e){
showInputWhen(e,'audi');
});
JS Fiddle demo.
References:
ChildNode.nextElementSibling compatibility.
document.querySelector() compatibility.
EventTarget.addEventListener() compatibility.

How to change HTML element select into sub-menu UI?

I want to know using native html element select can I do this add (submenus)
Processes
lack of process
failure to follow process
HTML
<!DOCTYPE html>
<html>
<body>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>
The code above just allows me to define sub-sections, but no seperate menu ui in parent ui? Is there a way I can change this.
thanks

No, standard selects do not allow for sub-menus, but there are some fairly simple jQuery solutions that use unordered lists.
These are both pretty good / simple solutions:
http://www.givainc.com/labs/mcdropdown_jquery_plugin.cfm
http://p.sohei.org/jquery-plugins/clickmenu/

Not using native HTML that I'm aware of, however you could use jQuery to do this.
<Select id="cartype">
<option value="Select">Select Car Type</option>
<option value="Swedish Cars">Swedish Cars</option>
<option value="German Cars">German Cars</option>
</Select>
<select id="carDetail">
<option value="unset">Select Car Type First</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready( function () {
$.fn.addOption = function(optText, optValue){
var option = new Option(optText, optValue);
return this.append(option);
};
$("#cartype").change(function() {
$("#carDetail option").remove();
switch ($("#cartype").val())
{
case "Swedish Cars":
$("#carDetail").addOption("Volvo", "volvo");
$("#carDetail").addOption("Saab", "saab");
break;
case "German Cars":
$("#carDetail").addOption("Mercedes","mercedes");
$("#carDetail").addOption("Audi","audi");
break;
default:
$("#carDetail").addOption("Select Car Type First","unset");
}
});
});
</script>

how to hide\show items in ddl

I have a ddl control. I want to change the visibility of some items on the client-side (JS).
I only found methods to insert\remove items.
But I only want to hide\show them.
Does someone has an idea how to do so ?

You need to access the item and set its [edit]style.display[/edit] to "none":
<html>
<head>
<script type="text/javascript">
function hideItem() {
document.getElementById("a3").style.display = "none";
}
</script>
<body onload="hideItem()">
<form>
<select name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
</form>
</body>
</html>

I think you are looking for the
<span style="display:none">
option. You can toggle this style using Javascript.

In Firefox, you can use the display style:
<select id="s" name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
and:
document.getElementById("a3").style.display = "none";
However, this will not work on Internet Explorer. For IE, you can only remove the element entirely (possibly re-adding it later):
document.getElementById("s").options[2] = null;
You could move the element to a separate, hidden <select /> if you want to store it somewhere for adding back later.

The only thing you can do is removing the option.
You can do this simply in jQuery by:
$('#yourOptionId').remove();
Or you can disable the option by:
$('#yourOptionId').attr('disabled', 'disabled');
And enable by:
$('#yourOptionId').removeAttr("disabled");
But no there is no way to simply hide an option.
By "ddl control" I'm assuming the structure will be like:
<select id="selectId">
<option id="optionId"></option>
</select>