First, I thank you for reading my post,
As my title says it I need to create popups on an option select.
I've searched in many jquery tutorials but they all talk about buttons or tags to create popups.
But that really doesn't help cause here is the fact : all my selected tags are in an tag which make the button and tag of no use.
So I need that when someone, with his mouse, just hover the text present in the selected option, there's for each options a dialog box that appears with in it the description of the text hovered , so here's my code :
<select name ="soin" id="soin" size="5"> <!-- the second one, pseudo-dynamic -->
<option value="">-----Select-----</option>
<option value="Passage" class="Logistique" >Passage</option>
<option value="PresenceDansUs" class="Logistique">Présence dans une US</option>
<option value="Rangement" class="Logistique">Rangement</option>
<option value="Medicarte" class="Logistique">Medicarte</option>
<option value="ChercheMateriel" class="Logistique">Cherche du Matériel</option>
<option value="Transfert" class="Logistique">Transfert d'un patient</option>
<option value="Autre" class="Logistique">Autre</option>
...there are 50 more values...
</option>
So for example if someone hover the mouse on "Passage" ,the first select value, a box appear with :"Passage is a way across a specified location" and so on for the others.
Here is a little picture to help you to figure out the idea:
and then with the mouse on the option value
That "dialog box" was made with paint, so please don't tell me I did it xD
So I thank you for your concern because I'm too junior to make that sort of things in jquery .
What you might be looking for is the 'title' attribute of the <option> tag -
<option value="Passage" title="Passage is a way across a specified location" class="Logistique" >Passage</option>
Check this fiddle
If you hover your mouse over the 'Passage' option, you will see the message as a small tooltip.
Related
I am attempting to create a form with a select with a bunch of options that are pulled from a database, and also one option that will be a placeholder that will say something like "Choose a title".
The issue I am experiencing is that although the placeholder option is indeed selected and is disabled correctly, it does not display in the actual input list before anyone clicks on it as the selected option.
Required behavior:
Before a user has clicked on the dropdown at all, they should see a dropdown that has the grayed out text of a disabled item that says "Choose a title". When they click on the dropdown, they can then choose from the list of titles that are grabbed from the database.
Current incorrect behavior:
Before a user has clicked on the dropdown at all, they see an empty dropdown menu with nothing written or selected in it. Once they click on the dropdown, it shows that the disabled option is currently selected even though the text doesn't show in the input box (but does in the dropdown), and are able to select one of the non-disabled options that is pulled from the database.
What am I doing wrong here? I've found several things online that tell me to do it the way I have it right now. Here is my code:
<label for="TitleSelector">
What do you want to edit?
</label>
<select name="TitleSelector" id="TitleSelector" v-model="selectedTitle">
<option value="" disabled selected>Choose A Title</option>
<option
v-for="(title, index) in allTitles"
:value="title"
:key="index"
>
{{ title }}
</option>
</select>
I've got it, it works if I v-bind the value of the disabled option like so:
<option :value="null" selected disabled>Choose A Title</option>
This is particularly basic, I'm a beginner and have recently gotten help from a very kind and sincere man that has gotten me to where I am now.
I want to give the user a choice to either select one of the options provided or insert their own information.
Heres what I've got so far:
<div class=naviselection>
Start:
<select id='start' onchange="updateNavigationLink()">
<option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
<option value="Centrum, Den Haag">City Center</option>
</select> End:
<select id='end' onchange="updateNavigationLink()">
<option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
<option value="Centrum, Den Haag">City Center</option>
</select>
</div>
<div class=Finallink>
<span id="navigationLink"></span>
Now, I'm trying to allow the user to put in their own text (corresponding to an address) and have that be one of the options.
Im thinking of having the text box appear once an option is clicked but I don't know how to define the value, I suppose it would be the result of some JavaScript…
<option value=undefined>Your Location</option>
So what would the JavaScript be, how would I make the value of the option above what my user types in.
If anyone can help it would be very much appreciated, I've just only begun with javascript about a week ago and know the very basics but I'm learning...
It seems you are looking for datalist. Please, take a look at this answer.
You may want to have an input field right after the select box which is enabled/disabled depending on whether the selected option is "your location" (that should be the last option):
<input id="custom-address" disabled />
and in your javascript you need (I'm assuming that you're using jQuery)
$("#start").change(function(){ //the following check will be triggered every time the selected option changes
if ($('#start')[0].selectedIndex==$('#start').length) { //if the selected option is the last one
$('#custom-address').prop("disabled", false); //enable the text input
} else {
$('#custom-address').prop("disabled", true); //otherwise disable it
}
})
Hope this helps
I am looking for how to do a searcher like this (The select with a map area)
I've done a select, but I don't know how to integrate a map area like that for select a destination.
<div class="form-group">
<select class="selectTbx" id="combobox" placeholder="Zone" name="zone">
<option value="">Select one...</option>
<%=this.strOptions %>
</select>
From the website that you have shown, first search box does not seem to have a search functionality, its just a text box and onclick of it its showing a DIV with contents. You can do the same easily with JQuery/Javascript
I would like this dropdown select to show an image with an alt text in front of the options, how can I do this?
<form>
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')">
<option value="#">Select one</option>
<option value="#"></option>
<option value="http://www.url1.com">www.url1.com</option>
<option value="http://www.url2.com">www.url2.com</option>
<option value="www.url3.com">www.url3.com</option>
</select>
</form>
Thanks a lot!
It is not possible to show images in an html <select> - you would have to use a custom solution like this one: http://ivaynberg.github.io/select2/
That is not a button!, it a select dropdown.
You should use ddSlick which is a free light weight jQuery plugin that allows you to create a custom drop down with images and description.
I hope this helps
DOM model doesn't allow img elements inside option elements, so you cannot put image into a select. Please have a look at an HTML language reference. But you can use JavaScript or jQuery to put an image at the left or right of the menu whenever a new option is selected.
However, in Firefox you can just add background image to option:
<select>
<option style="background-image:url(image1.png);">OPTION1</option>
<option style="background-image:url(image2.png);">OPTION2</option>
<option style="background-image:url(image3.png);">OPTION3</option>
</select>
And in other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI Selectable.
olsn's link is also a good example.
I am using boxover.js tool tip:
http://www.koders.com/javascript/fid8780CBE6D1BEE164FC239AA55DCB13A53B3536E8.aspx?s=document#L6
The tool tip works well with all the elements except SELECT box in IE.
I have a code where i need to show some image as a tool tip on selecting the option in a select box.
Ex:
<select name="categoryName" id="categoryName" style="width:50%;" size="10" >
<option value="">--Select Category--</option>
<option title="cssbody=[bdycss] cssheader=[hdrcss] header=[Category] body=[<center><p><img src='icon1.png'></p>]" value="1">category1</option>
<option title="cssbody=[bdycss] cssheader=[hdrcss] header=[Category] body=[<center><p><img src='icon2.png'></p>]" value="2">category2</option>
<option title="cssbody=[bdycss] cssheader=[hdrcss] header=[Category] body=[<center><p><img src='icon3.png'></p>]" value="3">category3</option>
</select>
Pls help me in fixing this issue. Thanks in advance.
IE6 does not [IE7 onwards it does] support title property for OPTION tag. You can have same title for all OPTIONs by setting title attribute in SELECT tag.
Another option is to have DHTML popup as tooltip.