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
Related
I want edit text with a drop down box along with custom scrollbar so end user can add data explicitly or can add from drop down box. The final entered value by end user should be saved.I want this in UI development preferably angular js.
Well from what i understood , you need a text input as well as a dropdown input together.
To be frank , this is quite easy and i dont understand what caught you up in this.
So here is the code:
<input type="text"/>
<select style="width:20px;">
<option value=""></option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
Check out the jsfiddle here:
https://jsfiddle.net/kna3fj5t/
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.
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'm not sure if this is a browser bug or if I am missing something subtle. Along the top of my page I have 2 select drop-downs, a label and then a text box all arranged horizontally. Everything is aligned to the left.
Initially, only the first select box is populated. When the user selects an item, the second box is populated via JavaScript. When this happens the width of the second select box increases to accommodate the contents and the label is pushed to the right. However the problem is that the input box does not move and ends up overlapping the select box.
In Firefox everything works fine and both the label and the text box get pushed to the right. Also, if I open the IE developer tools, select the text-box and un-check align left and then re-check it the text box moves to where it should be.
My html looks like this:
<div id="main-top">
<select id="firstSel" name="firstSel" >
<option value="">-- Select an Item --</option>
<option value="one">One</option>
</select>
<select id="secondSel" name="secondSel" >
<option value="">--</option>
</select>
<label for="Currency">Currency:</label>
<input class="input-sm" type="text" id="BECurrency" name="Currency" />
</div>
Any suggestions on how to solve this annoying problem?
I ended up fixing the width of the element in the css. This means that the width is set so that it is always the same width in all browsers.
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.