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);
}
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;
}
$('#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();
}
});
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
I'm attempting to get a dropdown list to select the correct value when the page loads.
#Html.DropDownList("CounterpartyTypeSelect", new SelectList(ViewBag.CounterpartyTypeOptions, "DefaultId", "Value"), new { #class = "selectbox", selected = Model.CounterpartyType })
However, when the page renders it always selects the first value in the dropdown list.
The html source for the page:
<select class="selectbox" id="CounterpartyTypeSelect" name="CounterpartyTypeSelect" selected="977980f2-ebb2-4c2a-92c2-4ecdc89b248d">
<option value="5802239e-c601-4f1e-9067-26321213f6e6">Societa per Azioni (SpA)</option>
<option value="f8160341-4a69-436f-9882-4da31a78f1d5">Gesellschaft mit beshrankter Haftung (GmbH)</option>
<option value="977980f2-ebb2-4c2a-92c2-4ecdc89b248d">Sociedad Anonima (SA)</option>
<option value="cdbeb1d3-301b-4884-b65a-612ddd8306f3">Private Limited Company (Ltd)</option>
<option value="1fe68d96-f31b-4859-9869-8c76a5eb1508">Corporation (Inc)</option>
<option value="9c9e5722-ab59-4d1c-a0a3-91b42a3ee721">Limitada (LTDA)</option>
<option value="0cb57339-8705-4e3a-8f6a-95e9664962b7">Public Limited Company (Plc)</option>
<option value="0924d6f1-06a9-49a3-ac05-b3e2686a0e92">Partnership</option>
<option value="c8fbe021-a8f7-4e9d-ab38-dbeb5af5a631">Limited Liability Company (LLC)</option>
<option value="30d9e22b-34f5-43c5-8471-e614dbedb6a6">Aktiengesellschaft(AG)</option>
</select>
As you can see it is putting the "selected" attribute into the outer select tag instead of on the option that matches the Id. I have another select with identical parameters (except variable names of course) and it renders correctly this way. I do not want to use DropDownListFor<T> because I have a HiddenFor field that actually submits this value in the form and javascript that sets the value to match the Select choice. I've confirmed my database is storing the values that I set correctly. What is going on?
SelectList() has an overload for you to choose the selected item. You are adding it as an HTML attribute in the helper and those get rendered to the parent select tag.
Do this:
#Html.DropDownList("CounterpartyTypeSelect", new SelectList(ViewBag.CounterpartyTypeOptions, "DefaultId", "Value", Model.CounterpartyType), new { #class = "selectbox" })
Use the overload for SelectList that takes four arguments:
new SelectList(IEnumerable items, string dataValueField, string dataTextField, object selectedValue);
What's happening in the first line of your code new { #class = "selectbox", selected = Model.CounterpartyType } is you're providing the selected attribute as an HTML attribute of the parent select element.
So you see selected="977980f2-ebb2-4c2a-92c2-4ecdc89b248d" appearing in your first line of output, which btw doesn't do anything.
Also you're providing the value to search for in the Helper as a hardcoded string "value" instead of the actual value you need from the model. The browser will default to the first option since it can't find any value matching 'value'.
To fix this, provide Model.CounterpartyType as the third parameter to your SelectList parameter instead of 'value'.
<select id="selectedSchool" size="3" multiple="multiple" name="selectedSchool">
#foreach (var item in ViewBag.pt)
{
<OPTION VALUE="#item.entityID">#item.name</OPTION>
}
</select>
on my page the user selects a school from the list of schools, each school has a unique ID which is needed and passed via the VALUE attribute, I also would like to pick up the name
(item.name) that was selected how can I resolve this info from my control Action Result?
public ActionResult ResultsSchoolsAttended(List<int> selectedSchool)
i iterate through the list of results, but I would aslo like selectedSchool.name to enter back in the db as 'display text'
how can i do this?
Well, MVC can only give you what is in the HTTP POST. And if you look at that, you will see that the <option> inner HTML isn't there. So you have only two choices:
Include it in the value in your markup, or
Look it up in your ResultsSchoolsAttended action based on the submitted value.
I'd pick the second, personally.