I have an ordinary select list (single not multiple). The list is headed by a title such as "Events" :
<option selected = "selected" value = " " class = "hselect" > Events </option>
Under the title are the actual choices. The user has a form to fill in, and the Events select box will appear in the form. Once the user has chosen his event, such as "register", the choice appears in an input box next to the dropdown. I use a Javascript program to do that.
The selection also remains in the select box itself, so that the form shows
|register| |register| -- the first in the select box, the second in the input box. What I need, instead, is for the select box to return itself to the heading, so that the form shows |Events| |register|.
Using the same Javascript program I can pick up the "Events" option, but I don't know how to get the select box to go back to its original configuration with Events showing at the top, and the choices underneath.
Is there a way to do this in Javascript?
To select the first option from a <select> use the "selectedIndex" property:
var target = document.getElementById('target');
target.onchange=function(){
alert('select changed!');
target.selectedIndex = 0;
};
fiddle: https://jsfiddle.net/adriel_santos/n90s0mzm/
Related
I want null option selected displayed as --Select-- by default in my dropDown. I'm trying to do it like this
<select class="form-control" asp-for="EducationId" asp-items="#(new SelectList(Model.educations, "Id", "Name"))"><option>--Select--</option></select>
It loads dropdown perfectly with --Select-- option selected but it does not make its value null. And when I try to get it value without selecting any option doing this
$('#EducationId option:selected').text()
It returns string having --Select--
But I want it to return null
I've tried this solution by adding disabled selected but according to its statement, once I select any option, it does not allow me to select that first option again. but in my case, this dropdown is optional and user can un-select any selected option.
How could I make this dropdown optional?
Any kind of help will be appreciated.
The educations is a bunch of items you are presenting to the user to select from. Simply add another item to it like this (I am assuming it is called Education):
Model.educations.Insert(0, new Education{Id = -1, Name = "--Select--" });
Then check if that item has been selected and do whatever you need to do.
I am using jquery chosen on 4 select boxes that are being populated via database.
The select box ids are: #Year_395, #Make_395, #Model_395, #Trim_395.
I am using the following script to "cascade" them so that the second select box's options depend on what option has been selected in the first, the options for the third are dependent on the second selection etc.
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
var parentValue = (this.value).replace(" ", "_");
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + parentValue))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
The native select boxes are cascading correctly. The problem is that when I implement jQuery Chosen, the new select boxes update, but do so one step behind the native boxes. For now I am using the below code to update the options for jQuery Chosen's replacement select box display. This should cause jQuery Chosen to update #Trim_395 as soon as an option for #Model_395 has been selected.
$("#Model_395").chosen().change(function(){
$("#Trim_395").trigger('chosen:updated');
});
Here is the link to the build site:
You will see that if you select your year, make, and model, no trim options will be available, as if you have yet to select the model. If you then select another model, the options for the first model you selected will be displayed. Selecting a third model will display the trim options for the second, etc.
I figured it out on my own. jQuery Chosen was updating before the hidden select boxes had time to update so:
$("#Model_395").change(function(){
wto = setTimeout(function() {
$("#Trim_395").trigger('chosen:updated');
}, 500);
});
Solved the problem. Thanks to anyone who looked :)
In GWT,how to have a ListBox which user can select drop down values as well as he can type hardcoded value in the list box?
NOTE:I should not use any smartgwt,ot ext-gwt in this case.
You can create this kind of widget combining the TextBox and the ListBox. What i would suggest is place a TextBox on a Panel and append a ListBox inline to it. Reduce the width of the ListBox using so that only its dropdown button is visible. Now on selecting a dropdown value call the TextBox setText(), and where ever you need the value to be selected always use the TextBox value.
Sample Code :
Ui-binder
<g:HorizontalPanel>
<g:TextBox ui:field="textBox"/>
<g:ListBox ui:field="list" addStyleNames="demo-ListBox"/>
</g:HorizontalPanel>
Css :
.demo-ListBox {
width: 20px;
}
Java
String text = list.getValue(list.getSelectedIndex());
textBox.setText(text);
// use the textBox.getText() always to get the value for the widget
//Also you can later compare the value of textBox and add it to the ListBox if needed via calling the list.addItem(text)
End Result :
Although this may sound dead simple, the matter is complicated by the fact I can only use the change() trigger on the select element. I am using the 'Chosen' jQuery plugin which basically modifies the multi select box on the page.
Whenever a item is selected or unselected, the plugin triggers the change event on the original select element. I am obviously able to get all the unselected items, but I need the one that was just unselected that caused the change event to trigger.
So I have the following function, the bit in the middle is what I need to capture the item that was just unselected. #cho is the id of the original select element.
$("#cho").chosen().change( function() {
// Need code here to capture what item was just unselected, if any...
})
Store value when the user changes the the check box.
var preVal;
$("input[name='g']").on("change",function(e){
if(preVal){
alert(preVal);
}
preVal=$(this).val();
});
Check this http://jsfiddle.net/fcpfm/
1.Use hidden field
2.Hidden field value initially empty.
3.Onchange put the selected value in a hidden field.
4.If onchange is happening again , hidden field value is the previously selected value.
$("#cho").chosen().change( function() {
var hidvalue = $('#hiddenfield').val();
if (hidvalue ) {
//Get the previously selected ids
var prev_ids = $('#hiddenfield').val();
//Then Update currently selected ids
$('#hiddenfield').val('currently selected ids');
} else {
//Update currently selected ids
$('#hiddenfield').val('currently selected ids');
}
})
Try using a variable to store the selected item. Update it each time when item changed. I cant add comment. That is why I am posting it as an answer.
I have a form which has a select list associated with the field players.
To populate the listbox, user clicks on a button on the form to display a popup and from that popup select players' names and then click another button on the popup which closes the popup and displays the selected values in the listbox.
By default, i put selected="true" in the select tag so that when user saves the form, the values in the listbox are saved.
<select size=5 id="sub_player_ids" name="sub[player_ids][]" multiple selected="true">
The above code selects all options in the selectbox and those options are highlighted in blue.
However it can happen that user deselects an option in the player's select box by error.
I would like all options in the select box to be selected by default - whether they are highlighted or not
Is there is a way to select all options in the select box by default when saving the form?
Thanks a lot for any suggestion provided.
Cheers
Do you know the values in the select? You can loop over the select and set each options selected to true.
for (var i = 0, children = select.childNodes, l = children.length; i < l; i++) {
if (children[i].tagName === "OPTION") children[i].selected = true;
}
Fiddle is using the fact that Chrome/IE7+ should define window.select as the element found in the DOM by the ID select. If you run this in Firefox you'll need var select = document.getElementById('select');
http://jsfiddle.net/robert/VKF4E/
It's a one-liner if you're using jQuery.
$("#sub_player_ids option").attr("selected", "selected");
Explanation: the syntax in the JQuery Selector uses CSS style to identify the "SELECT" (listbox) using the '#id' pattern and then following it with "option" selects all of the options within the named element. the "attr" function will add an attribute to each element returned. In this case we are adding the "selected" attribute and setting the value to "selected"