I've got a multiple select that I want to use to pick which elements show up in an HTML template window. So I have several options that I want to iterate over, and based on whether it's been selected, make the preview elements visible or hidden.
I'm going for something like this:
$('#area_select option').each(function(i){
if($(this).is(':selected')){var $css = {'visibility' : 'visible'}}
else{var $css = {'visibility' : 'hidden'}}
$(??????).css($css);
});
As you can see, I'm just iterating over each option (I'm pretty sure that syntax works) in my area_select menu, but I don't know how to make the css get applied to the corresponding piece.... how can I reference my preview elements via my options?
An easier way to go is to call .val() on the multiple select. That returns an array of selected values that you can iterate over.
var array = $('#area_select').val()
$.each(array, function(i,val) {
// your code
});
So as far as showing the elements is concerned, it would depend on what type of data is stored in the value of the select options.
For an ID, do this:
$(selectorForCollection).css('visibility','hidden');
var array = $('#area_select').val();
$.each(array, function(i,value) {
$('#' + value).css('visibility','visible');
});
Or if they are class names, do this:
$(selectorForCollection).css('visibility','hidden');
var array = $('#area_select').val();
$.each(array, function(i,value) {
$('.' + value).css('visibility','visible');
});
Give each of the options a name corresponding to the ID of the correct piece.
e.g.
<select>
<option value="whatever">Whatever</option>
<option value="whatever2">Whatever 2</option>
</select>
Then each of you elements will be contained in a a div like this:
<div id="whatever-preview">
<!-- Whatever -->
</div>
Then your Javascript
$('#area_select option').each(function(i){
if($(this).is(':selected')){var $css = {'visibility' : 'visible'}}
else{var $css = {'visibility' : 'hidden'}}
var div_name = "#" + $(this).attr('value') + "-preview";
$(div_name).css($css);
});
Give each option an id referencing the id of the corresponding element in the preview window.
for instance:
<option id="option-1">This turns on the first option element in the preview window</option>
<option id="option-2">This turns on the first option element in the preview window</option>
and give the preview window elements similar-ending ids:
<div id='window-1'>corresponding window preview element</div>
Then in the javascript:
$("#window-" + $(this).attr('id').split('-')[1]).css($css);
First, give the elements to hide or show the same class but id's matching the options values:
<div class="something" id="val_1">content1</div>
<div class="something" id="val_2">content2</div>
<div class="something" id="val_3">content3</div>
<div class="something" id="val_4">content4</div>
<select id="area_select">
<option value="val_1">val 1</option>
<option value="val_2">val 1</option>
<option value="val_3">val 1</option>
<option value="val_4">val 1</option>
</select>
then, when the select choosen option changes hide all the stuff and show the selected
$('#area_select').change( function(){
var val = $(this).val();
$('.something').hide();
$('#'+val).show();
return false;
});
Related
This is my dropdown.
<select id="sortBySelector" onchange="chooseSort(value)" style="display:block;border-color: #e0e0e0;">
<option value="nameSort" selected>Alphabetical</option>
<option value="gradSort">Graduation Date</option>
</select>
I have two <ul> with id= "nameSort" and "gradSort"
I wrote jquery code that will show only the selected one.
I tried this
<script>
function chooseSort(value) {
$("#nameSort").hide();
$("#gradSort").hide();
$(value).show();
}`
but it shows both lists when its on the Alphabetical option and shows nothing when i click on the Graduation option. Im not sure why this is happening. Please let me know if you can help. thank you for your time
Consider what this is doing with the given value:
$(value).show();
If the value is gradSort then you're doing:
$("gradSort").show();
Which is an incorrect selector. If you're looking by id then it's missing the # at the beginning. You can add that to the values:
<option value="#nameSort" selected>Alphabetical</option>
<option value="#gradSort">Graduation Date</option>
Or, if for a reason outside of this you don't want to change the values, you can add it to the string in the selector:
$('#' + value).show();
or:
$(`#${value}`).show();
it shows both lists when its on the Alphabetical option
It sounds like it shows both lists when the page first loads. If that's the case you can just call the function manually on page load to set the initial state:
chooseSort('#nameSort');
or:
chooseSort('nameSort');
(depending on which solution you used above)
The value itself will represent the actual value of option. So if the selected option value be gradSort this part of your code
$(value).show();
will be pointed to
$("gradSort").show();
which is not refer to anything in DOM. Because it is not a valid selector (tag), so to make this work, you should add # either
before your query selector
$('#' + value).show();
or before the value of your options.
<option value="#nameSort" selected>Alphabetical</option>
<option value="#gradSort">Graduation Date</option>
I will go with the query selector choice, so it will be something like this:
function chooseSort(value) {
$("#nameSort").hide();
$("#gradSort").hide();
$("#" + value).show();
}
$(document).ready(function() {
chooseSort("nameSort");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sortBySelector" onchange="chooseSort(value)" style="display:block;border-color: #e0e0e0;">
<option value="nameSort" selected>Alphabetical</option>
<option value="gradSort">Graduation Date</option>
</select>
<div id="nameSort">nameSort</div>
<div id="gradSort">gradSort</div>
You need a conditional to determine which will be shown and which will stay hidden. There are a few different ways to do this but I would do it like so:
<select id="sortBySelector" onchange="chooseSort(value)" style="display:block;border-color: #e0e0e0;">
<option id="nameSort' value="nameSort" selected>Alphabetical</option>
<option id="gradSort value="gradSort">Graduation Date</option>
</select>
function chooseSort(value) {
if (value === 'nameSort'){
$('#' + value).show(); // $("#nameSort").show(); would work
$("#gradSort").hide();
} else{
$('#' + value).show(); // $("#gradSort").show(); would work
$("#nameSort").hide();
}
}
Let me know if this works!
EDIT: In the spirit of keeping your HTML the same, I did have to add the id to each option to make it work. Also, I had to redo the value.show()
I have a html element ("trip") that has two dependent select. Jquery is used to determine the selection values for the second selection field (choice2)depending on the value selected for the first election field (choice1).
At the same time, I am also using jquery to duplicate "trip" as a repeating element through the append function. Because all of the elements have the same id, the selection values are the same for all repeating "trip". 1) How do we assign unique id for each appended element (e.g. trip1, trip2) 2) how do you make the jquery make independent calls to get different results with in "trip" element? (e.g. $("trip1"), $("trip2")
Html:
<form>
<div id="trip">
<select id="choice1" value="Z">
<option>Option 1</option>
<option>Option 2</option>
</select>
<select id="choice2">
...dependent on result of first select...
</select>
</div>
</form>
jQuery:
I use the following code to append the same html elements to the page:
var maxAppend = 0;
$("#add").click(function() {
if (maxAppend >= 4) return;
var additional = $('#trip').html();
$("#nexttrip").append(additional);
maxAppend++;
});
This is used to determine selection option for the second select based on what was chosen for the frist select.
$("#choice1").change(function() {
if($(this).val() == 'Z') {
$("select#choice2").html("<option>Select a value</option>");
$("select#choice2").attr('disabled', true);
}
else {
...determine values for choice2...
}
As others have suggested, creating dynamic ids can become a hassle. Instead, assign a class to the select elements.
<div class="trip">
<select class="choice1" value="Z">
<option>Option 1</option>
<option>Z</option>
</select>
<select class="choice2" value="Z">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
This will allow you to traverse your elements without having id conflicts.
So now, when you duplicate the element you will be able to determine the elements index with .index().
$("form").on("change", "select", function(){
var selInd = $(".choice1").index(this);
if($(this).val() == "Z"){
$(".choice2").eq(selInd).html("<option>Select a value</option>");
$(".choice2").eq(selInd).attr('disabled', true);
}
});
There is no need to append numbers to ids or classes. You simply pair the select elements by index. Since they are side-by-side, they will have the same index in accordance with their class. Hence using choice1 for the first and choice2 for the second.
From what you say it looks like you have a special meaning for each of the trips? If so, i wouldn't dynamically create elements but rather to pre-create all trips as hidden, and then show them according to your logic. If you don't have special treatment for each trip, than the other writers here are right, use class instead of id.
Regarding the dynamic id, you can do this:
var maxAppend = 0;
$("#add").click(function() {
if (maxAppend >= 4) return;
var additional = $($('#trip').html());
additional.attr('id', 'trip' + $('[id^=trip]').length)
$("#nexttrip").append(additional);
maxAppend++;
});
I am working on an MVC + jQuery project, I am creating dropdown list on runtime. After rendering while submitting form through jQuery, I am trying to get selected value. Drop down is rendered and working fine
Also I can check in source code. I am trying to get dropdown list by
$('#Monday_Periods').children('.PeriodRow').each(function () {
var elements = $(this).html();
var found = $('.Subject', elements);
});
I found all objects in variable found, and I can see it in Chrome debug
But after this I am unable to get selected value. As you can see in debug mode that no option is selected. I tried to get by val or text but no luck. Anybody can tell me that how I can get selected value
$(this).html(); is loosing the reference to the DOM (html() returns a String, not a DOM node).
Try to modify in:
var elements = $(this);
var found = $('.Subject', elements);
found.each(function(el){
console.log($(this).val());
}
or use directly (you already have an id on it!):
$('#subject1').val();
EDIT: SNIPPET ADDED
function printResults(){
$('#Monday_Periods').children('.PeriodRow').each(function () {
var elements = $(this);
var found = $('.Subject', elements);
found.each(function(el){
console.log($(this).val());
});
});
}
$('#print-results').click(printResults);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Monday_Periods">
<div class="PeriodRow">
<select class="Subject">
<option value="none">-- Select Subject --</option>
<option value="1">Biology</option>
<option value="2">Physics</option>
</select>
<select class="Subject">
<option value="none">-- Select Subject --</option>
<option value="1">Biology</option>
<option value="2">Physics</option>
</select>
</div>
<button type="button" id="print-results">PRINT RESULTS</button>
</form>
I have two select list,
Select list 1 contains the Mobile phone brands names
<select name="mobile-phone" class="mobile-phone">
<option value="Select">Select</option>
<option value="Nokia">Nokia</option>
<option value="Samsung">Samsung</option>
<option value="HTC">HTC</option>
<option value="Apple">Apple</option>
</select>
Select list 2 contains the phone type like
<select name="mobile-model" class="mobile-model">
<option value="Select">Select</option>
<option value="Nokia--Lumia-520">Lumia 520</option>
<option value="Nokia--Lumia-620">Lumia 620</option>
<option value="Samsung--Galaxy-s3">Galaxy S3</option>
<option value="Samsung--Galaxy-s4">Galaxy S4</option>
<option value="HTC--hero">Hero</option>
<option value="HTC--one">One</option>
<option value="Apple--iphone4">iPhone 4</option>
<option value="Apple--iphone5">iPhone 5</option>
</select>
My quest is I want to display Select list 2 according to the value users select in Select List 1.
If a user selects Nokia in first selection, then only Lumia phones should be shown in second select list. Like so, for other phones.
When None is selected in First select list, then second select list should not show anything, but still visible without any option (like disabled button).
How can I accomplish this using jQuery?
The JSFiddle I have made from above select list.
I'd suggest:
/* select the select element whose name is "mobile-phone",
assign an event-handler for the 'change' event:
*/
$('select[name="mobile-phone"]').change(function () {
// get the relevant/selected brand-name:
var brand = this.value;
/* find the option elements inside of the select element with
name="mobile-model", enable them all:
*/
$('select[name="mobile-model"] option').prop('disabled', false)
// show them all:
.show()
// filter the collection, to find only those whose value does not start with the brand-name:
.filter(function () {
return !(this.value.indexOf(brand) === 0);
})
// disable those elements:
.prop('disabled', true)
// hide them:
.hide();
});
JS Fiddle demo.
References:
Attribute-starts-with ([attribute^="value"]) selector.
filter().
hide().
prop().
show().
I think you are looking for:
$("#sel2").prop("disabled", true);
$( "#sel1" ).change(function() {
var value = $(this).val();
$("#sel2").prop("disabled", false);
$("#sel2 > option").hide();
$("#sel2 > option[value*='" + value +"']").show();
});
Only I put to selects Id for do the selection by Jquery more easy. Before I disabled the control wating for any selection, and when the first select change only I keep the option that macth with option[value*='" + value +"']".
Live demo here
There is a jQuery plugin that handles this exact case very nicely: http://www.appelsiini.net/projects/chained .
You should consider having two MySQL tables: brand, model. The brand table would just be a list of brands with IDs. The model table would contain a brand column where you input those IDs.
Then you should do a JSON query for the brand selected, and return a select list accordingly.
By doing it this way, you'll have an in depth database that you can call and manipulate in numerous ways.
Alternatively, you could do something like:
$(".mobile-phone").on("change", function(){
var brand = $(this).val();
$("[data-brand]").hide();
$("[data-brand="+brand+"]").show();
});
And do this:
<option data-brand="Nokia" value="...
I have a simple <select> list which I receive via an external API, which can not be changed.
My problem is the following: I want to convert this <select> list into a bunch of regular html links. I want to style the list using CSS in ways which do not work on <select>. I hide the original list with 'display:none'
This:
<select style="display:none;">
<option value="E1">Entry 1</option>
<option value="E2">Entry 2</option>
<option value="E3">Entry 3</option>
</select>
Should be converted into:
Entry 1
Entry 2
Entry 3
How do I achieve this?
I have found an Solution, but it's the wrong way! Create <select> from list - indent child items?
Here is a solution, it can be tested at http://jsfiddle.net/C5S32/44/
var options = '';
$('select').find('option').each(function () {
var
val = $(this).val(),
text = $(this).text(),
i = 1;
options += '' + text + '';
});
$('<div class="test" />').append(options).appendTo('#selectnav');