Dynamic drop down list content/behavior using JQuery - javascript

I have a use case in our UI, where I need to perform some hacky JQuery operations to dynamically populate a drop down box. Here is the scenario:
I have the following two select boxes and their options:
<span class="select levelSelect expandable-list replacement select-styled-list tracked focus select-clone tracking open" tabindex="-1" style="width: 157px; position: absolute; top: 566.733px; left: 338px;">
<select id="select1" name="select1" class="validate[required] withClearFunctions" tabindex="-1">
<option selected="" value="">Select one...</option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
</select>
<span class="select-value">Select one...</span>
</span>
<span class="select levelSelect expandable-list replacement select-styled-list" tabindex="0">
<select id="select2" name="select2" class="validate[required] withClearFunctions" tabindex="-1">
<option selected="" value="">Select one...</option>
<option value="optionA">option A</option>
<option value="optionB">option B</option>
</select>
<span class="select-value">Select one...</span>
</span>
Any change/selection for select1, invokes a change handler function, which needs to perform the following actions for select2:
If select1 == option1, Add an option for "N/A" (don't want this option to be seen), set "N/A" as the value
Otherwise, take out "N/A" if option 1 was previously selected, select ""
You should be able to repeatedly change select1 and get the same behavior
This is what I have tried:
if (select1 == "option1") {
// Add and select N/A
$("#select2").append('<option value="N/A">N/A</option>')
$("#select2").val('N/A');
}
else {
// Remove N/A option and select nothing
$("#select2").val('');
$("#select2" + " option[value='N/A']").remove();
}
Regardless of what is selected on select1, the selection/options for select2 do not change. Any help/pointers would be greatly appreciated.

This is what I was missing after each select box action:
.trigger('update-select-list').trigger('change');

Related

Multiple drop down boxes?

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.)

Can't access current value in select option input

In my meteor application, I need to get the current value of a select option field.
My markup:
<select multiple id="category">
<option value="" disabled selected>Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
In the template events I declare the event map as follow:
Template.objectsList.events({
// #category represents my select option input
"change #category": function (event) {
console.log(event.target.options);
},
// ...
});
in the console this would always print:
[option, option, option, option, selectedIndex: 0, namedItem: function, add: function, remove: function, item: function]
0: option
1: option
2: option
3: option
length: 4
selectedIndex: 0
__proto__: HTMLOptionsCollection
No matter, which option I select in the browser window, the selectedIndex attribute would always equal 0. How can I get the actual selectedIndex, so I can get the value of the currently selected item?
EDIT 1
I'm using materialize as UI framework and I initiate my select option fields as follow:
$(document).ready(function() {
$('select').material_select();
});
EDIT 2
It has to do with how the select option element is rendered with materialize, there is a similar question on SO and discussion on github about this topic.
Thing is, materialize would manipulate the DOM and render a ul List instead of the initial select option element:
<input type="text" class="select-dropdown" readonly="true" data-activates="select-options-76ad55d8-1376-b852-a496-ef2926e59632" value="Please select">
<ul id="select-options-76ad55d8-1376-b852-a496-ef2926e59632" class="dropdown-content select-dropdown" style="width: 420px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;">
<li class="disabled"><span>Please select</span></li>
<li class=""><span>Option 1</span></li>
<li class=""><span>Option 2</span></li>
<li class="active"><span>Option 3</span></li>
</ul>
So the solution would be to either
A get the selected value from the rendered ul li list (ugly)
execute the JS init at the time after the onchange event would already have gathered the current values (if possible)
Due materialize manipulating the DOM and implementing the select view using an unordered list (ul), the current value can be retrieved using jquery:
$("#category").val(); // #category represents the original select option we want to read
This will get an array of the currently selected values. If only one value should be selected, the multiple attribute should be removed from the <select> tag:
<!-- only 1 attribute selectable -->
<select id="category">
<option value="" disabled selected>Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<!-- multiple attributes selectable -->
<select multiple id="category">
<option value="" disabled selected>Please select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
event map:
Template.objectsList.events({
"change #category": function (event) {
var selectedValue = $("#category").val();
// do something with selectedValue
},
// ...
Try this:
<div class="input-field col s12">
<select id="category>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
"change #category": function(e, t) {
var changedValue = $(e.currentTarget).val();
}

Change select background colour when a non disabled option is selected

looking for a way to change the colour of a select box if one of the disabled options is not selected.
So this is the example drop down:
<select class="selectoption" name="desc[]">
<option disabled="disabled" selected="selected">Select option...</option>
<option value="1">Option 1</option>
</select>
How can i change the background colour of this select box, if the disbaled option is not selected.
So the back ground colour is #333 currently, once a user selects an option it is changed to another colour.
i already am doing something similiar using checkboxes. But i am able to use the
checkbox:checked
Thanks in advance!
If there's no problem in using javascript, you can check for the selected option that has a value.
HTML:
<select id="sel1" class="selectoption" name="desc[]">
<option disabled="disabled" selected="selected">Select option...</option>
<option value="1">Option 1</option>
</select>
JavaScript:
document.getElementById("sel1").onchange = function() {
if(this.value != null && this.value != undefined)
{
this.className = "myclass";
}
};
CSS:
select.myclass
{
background-color: red;
}
http://jsfiddle.net/AWMaa/

angular js, how to enabled when selected change

i have problem using angularjs, because i new.
this is my html code :
<select id="provinsiSelect" ui-select2 ng-model="params.id" style="width: 200px;">
<option value=""></option>
<option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
ng-selected="v.id == params.id">{{v.text}}</option>
</select>
<select id="kabupatenSelect" disabled ui-select2 ng-model="params2.id" style="width: 200px;">
<option value=""></option>
<option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
ng-selected="y.id == params.id">{{y.text}}</option>
</select>
as you can see that, there are two select, please help me when first select change, then second select enable from disable.
Simply use ng-disabled:
<select id="provinsiSelect" ui-select2 ng-model="params.id" style="width: 200px;">
<option value=""></option>
<option ng-repeat="v in prov" value="{{v.id}}" title="{{v.text}}"
ng-selected="v.id == params.id">{{v.text}}</option>
</select>
<select id="kabupatenSelect" ng-disabled="params.id" ui-select2 ng-model="params2.id" style="width: 200px;">
<option value=""></option>
<option ng-repeat="y in kab" value="{{y.id}}" title="{{y.text}}"
ng-selected="y.id == params.id">{{y.text}}</option>
</select>
Assuming you don't have an id of 0, params.id should be truthy once an id has been selected.
With ng-disabled as the previous comment said. You should also add a watch on the first select variable, and just set the params.id to the value you need on change.
$scope.$watch('provinsiSelect', function (newVal) {
$scope.params.id = true;
});

A Placeholder for the `select` tag?

I'm wondering how to achieve the placeholder effect with the select tag, it would be really nice to have the default selected option something like "Please Chose an Option:".
I have tried some variations and they are not working so far and I'm sure that it can be achieved cause i seen it somewhere (can't remember where).
I have tried this:
1)
<fieldset>
<select data-placeholder="Please select a product" id="s1" class="global">
<option value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
2)
<fieldset>
<select id="s1" class="global">
<option data-placeholder="true" value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
Both are not working, maybe there is a jQuery method to make that?
Quick edit: I DON'T want to just disable one of the options and make it selected because it will still be showed in the drop-down list with the other items.
Here's two types of placeholder, re-selectable and hidden:
Demo: http://jsfiddle.net/lachlan/FuNmc/
Re-selectable placeholder:
<select>
<option value="" selected>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
Hidden placeholder:
<select class="empty">
<option value="" selected disabled>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
CSS to change the colour of the first item:
select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }
And a little jQuery to toggle the font-color after selection:
// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
$(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');
Inspiration:
https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148 - hidden placeholder
I've built a simple demo by following #Truth suggestion: http://jsfiddle.net/6QnXF/
(function($){
$('#myAwesomeSelect').change(function(){
if( !$(this).data('removedPlaceHolder'))
{
$(this).find('option:first').remove();
$(this).data('removedPlaceHolder', true);
}
});
})(jQuery);
I hope it works for you.
As far as I know, there's no way doing it with HTML alone (though that would be nice.)
You can fake it with a selected option (I know you don't want it, but it's probably the only way). Once another option is selected, you can remove it.
Here's a working example of what I describe.
My guess is that you're going to have to construct your own workaround for a select box. Something like a series of divs that act as options which when clicked are shown and have their value inserted into a hidden input field.

Categories