$('#select-state').selectize({
closeAfterSelect: true,
onItemAdd: function() {
this.close();
}
});
This is the multiple select dropdown, When selected, it closes the dropdown but after that if I clicked the focused dropdown dropdown is not opening. To work, I have to unfocus by clicking outside and when I click again the dropdown, then the dropdown is opening. I want a soultion for opening dropdown when we click the focused dropdown.
<select id="select-state" name="state[]" multiple class="demo-default" style="width:50%" placeholder="Select a state...">
<option value="">Select a state...</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA" selected>California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
</select>
It took me a long time to figure this out, so I'll post my answer here almost 2.5 years later for posterity :)
$('#select-state').selectize({
closeAfterSelect: true,
openOnFocus: false,
//Close dropdown on clicking on control in focus
onInitialize: function () {
var that = this;
this.$control.on('mousedown', function () {
if (that.isOpen)
that.close();
else
that.open();
});
},
});
I am Not using the closeAfterSelect: true part as that's not in my requirement, so you will have to account for the dropdown re-opening when deleting items from the list.
If I find a fix for that, then I'll edit this. I hope this is still useful to someone!
This does not solve your whole problem, since the focused select's menu still won't show on click. But you can call blur() in the onItemAdd callback, making the - now - blurred input clickable again.
Also, you don't need to call this.close(), the library will do that for you.
$('#select-state').selectize({
closeAfterSelect: true,
onItemAdd: function(){
this.blur();
}
});
Related
I am asking for help. Is there any way I could fill an input box based on drop down selection? On my modal I have a dropdown option for subject description and I would like the subject number input field dynamically change its value. Any help would be much appreciated.
This is how I retrieved the data for my dropdown
subjects=DB::table('programs_subj')->select('corsdes', 'corsno')->get()
This is my dropdown code for the subject description which is working and the selected is saved but I could quite how to incorporate the subject number
<select name="corsdes" id="corsdes" wire:model="corsdes">
<option value="corsdes" wire:model="corsdes"></option>
#foreach($subjects as $sbj)
<option value="{{ $sbj->corsdes }}">{{ $sbj->corsdes}}</option>
#endforeach
</select>
<input name="corsno" id="corsno" wire:model="corsno"><input>
if you have the public properties $corsdes and $corsno then:
public function updatedCorsdes($value)
{
$this->corsno = $this->subjects->where('corsdes',$value)->first()->corsno;
}
I have a requirement to load a set of pre-defined values from the database but also give a user ability to enter a custom values as well. Good example is here:
https://jsfiddle.net/api/mdn/
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
Is it possible to implement this feature in JQGrid?
This will only happen in the edit mode one per row. It should function exactly as as selecting from a drop down, only one value will be displayed and updated/saved. I will have to use is for only one column where each row will have a list of dynamic predefined values coming from the database.
Here is my start:
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
function myelem (value, options) {
var el = document.createElement("input");
el.type='text';
options.id = 'myBrowser';
el.setAttribute("list", "browsers");
return el;
}
The question is how to populate the datalist dynamically for each row based on the next column value and after exiting the edit mode save the selected value to the db?
Thank you,
If a value was previously saved for this column it should be displayed. When a user enters an edit mode the previously displayed value will be at the top (default) but the same set of predefined values should be available in the drop down with the option to enter a new custom value.
Thanks.
I found this very interesting and have created new article in our Guriddo Knowledge base where I explain in detail how to do this
I have two tables Categories and Products
I have made a simple relation between them so I can quickly choose from a dropdown of Categories
My question: is there a way to put an 'add new' in that dropdown?
so the user won't have to go out to the category edit section to add a category
Yes, you can use Selectize.js
Here is client side example
HTML
<select id="my-items" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
JS
$('#my-items').selectize({
create: function(input) {
//This function will create the category on the server side
if(create_new_category(input)){
return {
value: input,
text: input
}
}
return false;
}
});
function create_new_category(input){
alert('Category '+input+' created on server');
return true; //if created successfully otherwise return false
}
JsFiddle.
Example is with multiple select, if don`t need multiple just remove the attribute.
Also you will have to provide an ajax controller for creating new category.
If you are using Grocery Crud,
you need to overwrite the column if you want this in list view.
Example
Or to overwrite the edit field if you want it in edit view.
Example
I'm using a script solution I found here, by #clops (clops) that sets the onclick value of a submit button in a form, based on a item selected in a dropdown list. Everything in the script is working as it should, however I would like to open the new window in a new tab on click of the button. Also it would be nice to have the submit button disabled until an option in the list is selected. Any feedback would be helpful. Thanks.
Current script and HTML is below:
<script>
function goToNewPage() {
if(document.getElementById('target').value){
window.location.href = document.getElementById('target').value;
}
}
</script>
<form name="dropdown">
<select name="selected" id="target" accesskey="E">
<option selected>Select...</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.search.com/">Search.com</option>
<option value="http://www.dogpile.com/">Dogpile</option>
</select>
<input type="button" value="Go" onclick="goToNewPage(document.dropdown.selected)">
</form>
Nothing an author can do can choose to open in a new tab instead of a new window.
you could open it in new window as following
window.open(url,'_blank');
where the URL is your target form the drop down list
to disable submit button until an option in the list is selected, check this link
Is there anyway of showing a tooltip on the dropdown list?
such as when the list is dropped and a person hovers over each option a tooltip or something with details appears. this is for a drop down list with a cascading drop down.
this is for asp.net
Marco, not sure what browser your demographic is, but the standard code below works for FF.
<select>
<option value="1" title="this is text about the value">Option 1</option>
</select>
You can do something like this in code behind (c#):
foreach (Widget w in Widgets)
{
ListItem item = new ListItem(w.Name, w.WidgetID.ToString());
item.Attributes.Add("title", w.TooltipText);
ddlWidgets.Items.Add(item);
}