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++;
});
Related
I am trying to populate a form option value if it's attribute quantity equals zero.
My goal is to add the a message to the current option value
My html is:
<select class="valid">
<option disabled="disabled" selected="selected" value="">Select Bar</option>
<option value="1" quantity="99">value 1 </option>
<option value="2" quantity="0">value 2 </option>
</select>
So far I've tried the following in jQuery but it's not working:
if($(this).attr('quantity') == '0') {
$(this).append('<span>message</span>');
}
If you don't care about preserving the original message, than you can simply say $(this).text("message"). Leave out the <span> since it cannot be rendered inside of an <option> element anyway.
if($(this).attr('quantity') == '0') {
$(this).text('message');
}
If you want to preserve the original message, you have a couple options. One would simply be to append the new message to the original, however, it may get tricky to remove it later, so I would suggest having some sort of delimiter so you can easily identify the original vs the appended message, like so:
var $option = $(this);
if($option.attr('quantity') == '0') {
$option.text($option.text().trim() + ' (message)');
}
Then, to remove the message, you can do something like this:
$option.text($option.text().slice(0, $option.text().indexOf('(')).trim());
You can populate the option with like this,
$(document).ready(function () {
$('.valid').on('change', function () {
if ($(this.options[this.selectedIndex]).attr('quantity') == 0) {
$(this.options[this.selectedIndex]).find('span').remove();
$(this.options[this.selectedIndex]).append('<span>Message</span>')
}
});
});
JSFIDDLE
I'm not entirely sure of what you're trying to achieve from your question, but you cannot add html elements to an option element. You can however change the text as follows:
$(document).on('change', '.valid', function(){
var selected = $('.valid > option:selected');
if(selected.attr('quantity') == '0'){
selected.text('something else');
}
});
if you wanted to append an error you could do so by using jQuery append() or concatenating with the original value. Alternatively if you wanted it as validation outside of the select box, you could simply assign to the value of a div by replacing the line inside of the if statement.
<select class="valid" onchange="quality(this.options[this.selectedIndex].getAttribute('quantity'));">
<option disabled="disabled" selected="selected" value="">Select Bar</option>
<option value="1" quantity="99">value 1 </option>
<option value="2" quantity="0">value 2 </option>
</select>
<span id="msg"></span>
<script type="text/javascript">
function quality(val) {
if(parseInt(val) == 0){
document.getElementById("msg").innerHTML = "Message";
}
}
I'm using angular to manage my select dropdown, from an array.
The entries in the array itself are all lowercase.
The "selected" variable to be used elsewhere in the code wants to be lowercase.
The displayed entries in the dropdown want to be uppercase
When the dropdown is closed it wants to display the currently selected entry (in uppercase) with the string "VIEWING: " prepended.
I understand how to achieve the first 3 (by using myValue.toUpperCase() for myValue in myArrayOfValues) but I don't even remotely know how to go about achieving the 4th point - either in Angular (ideally) or in raw JS/jQuery
Anyone know how to achieve this?
I think you want a combination of:
https://api.jquery.com/focusin/
https://api.jquery.com/change/
https://api.jquery.com/focusout/
HTML:
<select name=dropdown size=1>
<option value="option1">option 1</option>
<option value="option2" selected>VIEWING: option 2</option>
</select>
Javascript:
var dropdown = $('select[name="dropdown"]');
dropdown.focusin(function() {
var selected = dropdown.find(":selected");
selected.html(selected.val());
});
dropdown.change(function() {
updateSelected();
$(this).blur();
});
dropdown.focusout(function() {
updateSelected();
});
function updateSelected() {
var selected = dropdown.find(":selected");
var html = "VIEWING: " + selected.val();
selected.html(html);
}
https://jsfiddle.net/r89oy2zk/
I found a nice demo on an old JSFIddle for Moving items from one multi-select box to another with JavaScript
You can see the demo here: http://jsfiddle.net/jasondavis/e6Y7J/25/
The problem is, the visual part works correctly but when I put this on a server with PHP, it only POST the last item added to the new select box. So instead of POSTING an array of items, it will only POST 1 item regardless of how many items exist in the selection box.
Can anyone help me?
The JavaScript/jQuery
$(document).ready(function() {
$('select').change(function() {
var $this = $(this);
$this.siblings('select').append($this.find('option:selected')); // append selected option to sibling
});
});
I believe I've hit this issue before. For the PHP $_POST array to populate this correctly you need to add a name field with [] at the end of the name. PHP will then interpret the result as an array of all the values and not just the last selected one.
Example:
<select name="demo_multi[]" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
When you recall the item in the $_POST array leave off the square brackets.
$values = $_POST['demo_multi'];
Change the multiselect name to an array
<select name="post_status[]" multiple id="select2" class="whatever" style="height: 500px; width: 222px;"></select>
I think you also have to select all items in the
This is pre jquery but it works.
`<form onsubmit="selectAll();"> ....</form>
function selectAll()
{
for(j=0; j<document.formdata.elements.length; j++)
{
// if a multiple select box then select all items in the box so they are sent with the form
var currObj = document.formdata.elements[j];
if (currObj.tagName == 'SELECT' && currObj.multiple == true)
for (i=0; i<currObj.length; i++)
currObj.options[i].selected = true;
}
}`
This will then be loaded into the array named in the
I have a dropdown <select> element to select states from the list of 50 states, I select the 1st value, save it, and show the value in DOM. I changed and select to the 5th value, saving it shows the value updates in DOM. Now back i am selecting the 2nd Value, and saving it. It's not saving the value in DOM and it's showing the previous selected 5th value. I Checked with different values, and found that, after selecting any higher index value, selecting back, lower values are not affecting in DOM, and hence i am not getting the correct values in POST.
This is the function i am calling on change.
function updateDOM(inputField) {
var elementId = inputField;
if (inputField.type == "select-one") {
var prev_select = inputField.selectedIndex;
$('#'+inputField.id+' option').each(
function() {
$(this).removeAttr('selected');
}
);
document.getElementById(elementId.id).selectedIndex = prev_select;
if (browserVersion == 9) {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}
else {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}
document.getElementById(elementId.id).value
= document.getElementById(elementId.id).options[prev_select].value;
}
The HTML
<select id="abc" name="abc" onchange="javascript:updateDOM(this);" class="required" >
<option name="" value="" title="null" selected ></option>
<option name="AK" value="Alaska" title="null" >Alaska</option>
<option name="AL" value="Alabama" title="null" >Alabama</option>
<option name="AR" value="Arkansas" title="null" >Arkansas</option>
<option name="AZ" value="Arizona" title="null" >Arizona</option>
</select>
First of all, why don't you use ":selected" selector of jQuery, which you are using anyway? Also, why are you using jQuery only once?
I would recommend doing it in jQuery-style (sorry, I'm not quite sure what you are trying to do exactly in your code):
http://jsfiddle.net/msLXt/1/
P.S. What is the difference between these conditions?
if (browserVersion == 9) {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}
else {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}
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;
});