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>
Related
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/
What is the 'AngularJS' way to disable an 'option' HTML5 element?
I'm using AngularJS v1.2.25.
Plunk Link:
https://plnkr.co/edit/fS1uKZ
<!-- CODE BEGIN -->
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#2.0.0" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
<!-- CODE END -->
I'm making a 'form' element and there are several 'select' element tags with several 'option' element tags.
The 'option' element tags have identical attributes throughout all four of the 'select' element tags.
I want the user to rank the car manufacturers. When they select a manufacturer, I want to disable that 'option' element in all four 'select' element tags.
I found the following question/answer, but is this the 'AngularJS' way? (Disable option in select)
They are using jQuery and I know that AngularJS contains 'jQuery Lite', but is that implementation the 'AngularJS' way?
I found this documentation at the AngularJS site:
htt9$://docs.angularjs.org/api/ng/directive/ngDisabled
This is the accompanying Plunk link:
htt9$://plnkr.co/edit/?p=preview
I can appreciate the example provided by the AngularJS team. I was thinking about modifying ng-model and/or ng-disabled. I would like to avoid 'hacking' AngularJS 'core' files.
Do I decouple ng-model and/or ng-disabled?
Or, should I craft a custom filter?
I come from a jQuery background, and I'm trying to adhere to AngularJS best practices as much as possible. I want to prevent excessive 'technical debt'.
The Angular way to disable a select option is to use ng-disabled="expression"
This plunker shows how it's done.
In you case you can have 4 selects like so:
<select ng-model="model.selected1">
<option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 1)">{{c.label}}</option>
</select>
<select ng-model="model.selected2">
<option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 2)">{{c.label}}</option>
</select>
<select ng-model="model.selected3">
<option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 3)">{{c.label}}</option>
</select>
<select ng-model="model.selected4">
<option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 4)">{{c.label}}</option>
</select>
where model.options is your list of options
var model = $scope.model = {
options: [
{label: 'Volvo', value: 'volvo'},
{label: 'Audi', value: 'audi'},
{label: 'Saab', value: 'saab'},
{label: 'Opel', value: 'opel'},
],
should_disable: should_disable
}
That function should_disable(c, num) is supposed to be true when car c is selected in a <select> other than num.
function should_disable(c, selectnum){
var other_selectnums = [1,2,3,4].filter(function(n){
return n != selectnum;
});
var is_selected_somewhere_else = false;
for(var i=0; i<other_selectnums.length; i++){
var otherselectnum = other_selectnums[i];
if(c.value == model['selected'+otherselectnum]){
is_selected_somewhere_else = true;
break;
}
}
return is_selected_somewhere_else;
}
Here's a fully working plunkr
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/
Hello there dear community.
Here is my HTML code:
<select name="Pcolor" id="image" style="height:30px;">
<option value="">Избран цвят: Blue/Lt Blue </option>
<option value="45751303" color-number="0">Black</option>
<option value="45751343" color-number="1">Black/Pink</option>
<option value="45751359" color-number="2">Blue/Lt Blue</option>
<option value="45751324" color-number="3">Dk Purple/Purpl</option>
<option value="45751390" color-number="4">Ink/Cerise</option>
</select>
I want to ask how i can get the color-number attribute number where option text is Blue/Lt Blue for example ?
It is important to make it only with JavaScript/jQuery !
I hope you understand what i want to describe, thanks in advance!
I would do this way:
$('#image option[value="Blue/Lt Blue"]').attr("color-number");
So essentially you search for the correct option and get it attribute.
Using :contains() won't be a proper solution as it will return partial matches, instead you can use .filter()
var text = 'Black/Pink';
var cn = $('select[name="Pcolor"] option').filter(function() {
return $(this).text().trim() == text;
}).attr('color-number');
console.log(cn)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="Pcolor" id="image" style="height:30px;">
<option value="">Избран цвят: Blue/Lt Blue</option>
<option value="45751303" color-number="0">Black</option>
<option value="45751343" color-number="1">Black/Pink</option>
<option value="45751359" color-number="2">Blue/Lt Blue</option>
<option value="45751324" color-number="3">Dk Purple/Purpl</option>
<option value="45751390" color-number="4">Ink/Cerise</option>
</select>
$('#image').on('change',function() {
alert($(this).find('option:selected').attr('color-number'));
})
https://jsfiddle.net/cw6knsc5/2/
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>