I've created a dynamic select list box as below
for (var i in c) {
//alert(c[i].IsDefault);
if(c[i].IsDefault==true){
//alert('found default');
$("#AnsType").append("<option value='" + c[i].ID + "'>" + c[i].Code+ "</option>");
temp = c[i].Code;
}
else{
$("#AnsType").append("<option value='" + c[i].ID + "'>" + c[i].Code+ "</option>");
}
}
refreshed it
$('#AnsType').selectmenu('refresh');
I tried all these methods and tried to select teh 2nd element in teh listnone worked for me.
$('#AnsType').val(temp.toString());
$('#AnsType').get(3).selectedIndex = 3;
$('select#AnsType').val('3');
$("#AnsType option[text='3']").attr("selected","selected") ;
$("#mydropdownlist").attr('selectedIndex', 1);
$('#AnsType').val(3);
$("#AnsType").attr('selectedIndex', 2);
$("#AnsType").val(c[parseInt(temp)].Code);
$("select#AnsType option[selected]").removeAttr("selected");
$("select#AnsType option[value='"+temp+"']").attr("selected", "selected");
this is how when my listbox is created
<select id="AnsType" name="AnsType">
<option value="1">Obokad</option>
<option value="3">Egen bokning</option>
</select>
Any help is appreciated and thanks in advance for your help..
If you want some element to be pre-selected when creating the menu, add the selected attribute to the corresponding option element:
if(c[i].IsDefault==true){
$("#AnsType")
.append("<option value='" + c[i].ID + " selected='selected'">" + c[i].Code+ "</option>");
temp = c[i].Code;
}
Note that you have to refresh again the selectmenu after you programmatically change the value of the underlying select element:
$('#AnsType').val('3');
$('#AnsType').selectmenu('refresh');
Documentation
refresh update the custom select
This is used to update the custom select to reflect the native select element's value. If the number of options in the select are different than the number of items in the custom menu, it'll rebuild the custom menu. Also, if you pass a true argument you can force the rebuild to happen
Related
I`m trying to make a simple select which generate the next select box...
but I cant seem to make it work
so, as you can see I'm making divs that have ID and parent, when I'm clicking on the first select the value generate the next select box with the divs and the parent value.
this is the jQuery, but for some reason I cant understand why its not working.
$(document).ready(function() {
var i = 1;
var t = '#ss' + i;
$(t).change(function() {
i++;
t = '#ss' + i;
var pick = $(this).val();
$('#picks div').each(function() {
if ($(this).attr('parent') == pick) {
$('#ss' + i).append('<option value=' + $(this).text() + ' >' + $(this).text() + '</option>');
}
$('#ss' + i).removeAttr('disabled');
})
console.log(t);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='picks'>
<div id='29' parent='26'>Pick1</div>
<div id='30' parent='29'>Pick11</div>
<div id='31' parent='26'>Pick</div>
</div>
<select id="ss1">
<option >First pick</option>
<option value="26">Angri</option>
<option value="27">lands</option>
<option value="28">tree</option>
</select>
<select id="ss2" disabled>
<option >Secound Pick</option>
</select>
<select id="ss3" disabled>
<option>Third Pick</option>
</select>
Here is a jsfiddle jsfiddle
Is this what you were shooting for? https://jsfiddle.net/6c5t8ort/
A couple things,
var t = '#ss' + i;
$(t).change(function() {
This only adds the change event to the first dropdown. If you give jQuery a selector (a class) if will add the event to all the elements though. Also the way you had your i variable set up means it would increment on every change.
The code below only attaches a change listener to the first ss ss1 so the change function is never called when you change ss2.
var i = 1;
var t = '#ss' + i;
$(t).change(function() {
You can fix this by adding a class on each select and using $(".myClass").change(function() {
or you can just attach the listener to all selects $("select").change(function() {
Also the value for the option tag does not include a "parent" number. In this case it would be Pick, Pick1, or Pick11.
$('#ss' + i).append('<option value=' + $(this).text() + ' >' + $(this).text() + '</option>');
I am having an issue involving a multiple select menu. The user has the ability to select multiple items from Selectbox A and add them to Selectbox B. I Use jQuery to add the items to an array each time the add button is clicked and populate Selectbox B using a foreach loop in php and for the most part it is working fine.
However the issue is that when the user adds the first item to Selectbox A it adds the item but also an empty option tag which I do not want. Is there anything I can do to resolve this?
This is my HTML code:
<select multiple="multiple" id="active" name="activecontributors[]">
<option value="0"> </option>
</select>
This is my JQuery code:
var drop2html = $("#active").html();
//ADD/REMOVE functionality for the contributors select boxes.
$('#addBtn').click(function (e) {//Adding
e.preventDefault();
$('#compresult option:selected').each(function(){
drop2html += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
})
$("#active").html(drop2html);
});
$('#removeBtn').click(function (e){//Removing
e.preventDefault();
$('#active option:selected').each(function(){
$('#active option:selected').remove();
})
drop2html = $('#active').html();
});
//on submit select all the options in active contributors...
$('#mainform').submit(function(){
$("#active option").attr("selected", "selected");
});
For some reason when the page loads it always shows the option tag. I would like for my select box to show no option tag if possible.
its because of the empty option already present in that menu.
$('#compresult option:selected').each(function(){
drop2html = '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
})
try this for without appending to the string or
var drop2html = '';
store empty value to it.
You can use below code without drop2html variable and get rid of your problem :
$(function(){
//remove empty option from active
$('#active option').remove();
$('#addBtn').click(function (e) {//Adding
e.preventDefault();
$('#compresult option:selected').each(function(){
$('#active').append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>');
})
});
$('#removeBtn').click(function (e){//Removing
e.preventDefault();
$('#active option:selected').each(function(){
$('#active option:selected').remove();
})
});
});
I'm running into a weird problem. I have a text box and accompanying button. The user will type in a name and click the button to add it to multiple select below it.
I want to add the name to the select as selected so that every name in the select is always selected. I'm using select2 so that the selected options appear as little boxes and can be clicked on to remove (see the 2nd select on this page: http://fk.github.io/select2-bootstrap-css/)
I have it working for the first name you type in, but I can't get it to select any subsequent names in addition to the first.
$('#Visitors').append("<option value='" + visitorLogin.toUpperCase() + "'>" + visitorLogin.toUpperCase() + "</option>");
$('#Visitors option').prop('selected', 'selected');
var allusers = $('#Visitors option').val();
console.log(allusers);
$('#Visitors').val(allusers).trigger("change");
I just had to capture all of the options like this:
$('#Visitors').append("<option value='" + visitorLogin.toUpperCase() + "'>" + visitorLogin.toUpperCase() + "</option>");
var allOptions = $("#Visitors").children().map(function () { return $(this).val(); }).get();
$('#Visitors').val(allOptions).trigger("change");
I'm new to HTML. I'm trying to retrieve a value from 1st select tag, and if the value is as expected, the 2nd select tag will appear below 1st select tag. Here's what I've been trying:
<ul id="MAIN">
<li><span>1st Select Tag :</span>
<select onchange="createNewSelectTag()" id="SelectTag1">
<option>no</option>
<option>yes</option>
<option>maybe</option>
</select>
</li>
<script language="javascript" type="text/javascript">
function createNewSelectTag()
{
/*check if 2nd select tag is already exist. if it is, cannot make another 2nd select tag*/
if (document.getElementById('createdSelectTag'))
{
if (document.getElementById('SelectTag1').selectedIndex == 0)
{
var element = document.getElementById('createdSelectTag');
element.parentNode.removeChild(element);
}
}
else
{
if (document.getElementById('SelectTag1').selectedIndex > 0)
{
var newSelectTag = '<li id="createdSelectTag"><span>2nd Select Tag :</span>' +
'<select id="SelectTag2">' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'<option value="c">C</option>' +
'</select>' +
'</li>';
document.getElementById('MAIN').innerHTML += newSelectTag;
}
}
}
</script>
</ul>
Now, clicking "no" in 1st select tag will remove the 2nd select tag, and clicking other options will create 2nd select tag, just as I have expected.
However, changing the 1st select tag for the first time does not immediately change the value of the 1st select tag even though the 2nd select tag is already generated below. For example, when the page is first loaded, the value of 1st select tag is by default "no". If I change it to "yes" or "maybe", the 2nd select tag is created, but the value of the 1st select tag is still "no". I need to double change it to change the value of 1st select tag. What have I done wrong?
you have to save the current select state during the function. Here is a small adaption (see commented lines)
<script language="javascript" type="text/javascript">
function createNewSelectTag()
{
/*check if 2nd select tag is already exist. if it is, cannot make another 2nd select tag*/
if (document.getElementById('createdSelectTag'))
{
if (document.getElementById('SelectTag1').selectedIndex == 0)
{
var element = document.getElementById('createdSelectTag');
element.parentNode.removeChild(element);
}
}
else
{
// save selected state
var holdState = document.getElementById('SelectTag1').selectedIndex;
if (holdState > 0)
{
var newSelectTag = '<li id="createdSelectTag"><span>2nd Select Tag :</span>' +
'<select id="SelectTag2">' +
'<option value="a">A</option>' +
'<option value="b">B</option>' +
'<option value="c">C</option>' +
'</select>' +
'</li>';
document.getElementById('MAIN').innerHTML += newSelectTag;
// set to saved state
document.getElementById('SelectTag1').selectedIndex = holdState;
}
}
}
</script>
You use innerHTML += ... to create the new element. Now this will take the original HTML (that doesn't have the selected attribute) and overwrite the current state of the DOM with that. Therefore, the top select element will be "restored" to its original value.
Solution: don't use innerHTML += ..., but use appendChild, in a similar manner to how you used removeChild in the other branch of the script.
Html:
<select id ="combooptions">
<option id="combostart" value=""></option>
</select>
js:
var str = "";
if (combonews.length > 0)
for (var i in combonews) {
str += "<option value='" + combonews[i][0] + "'>" + combonews[i][1] + "</option>";
}
jQuery("#combooptions").append(str);
It works fine, but now I want to remove those appended one, leaving the initial 1 option tag, as shown above.
I tried:
jQuery("#combooptions").html('');
//or
jQuery("#combooptions").append('');
//or
jQuery("#combostart").append('');
//or
jQuery("#combostart").html('');
but no success.
Please help
thank You
Since you gave the first option a unique ID, just do:
$('#combostart ~ option').remove();
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
To shrink a select list, you can also lower the number of options:
document.getElementById("combooptions").length = 1;
With jQuery:
$("#combooptions")[0].length = 1;
More generic idea to remove "all but the first":
$("#combooptions :not(:first-child)").remove();
Example: http://jsfiddle.net/kVRpy/
You could select all options and then remove the one with id combostart from your selection.
Then call .remove() to remove the unwanted options.
$('#combooptions option').not('#combostart').remove();
Try this:
$('#combooptions').html("<option id='combostart' value=''></option>");