We Keep Coding

Edit-text with Drop-down box in HTML5

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/

dropdown select box option not working in chrome browser

when i select the language english in firefox then alert come but when i
select it in chrome then alert not display.i don't know what is wrong there.
below is the code of select box:
<select name="setlanguage" id="setlanguage" class="language" data-ng-model="setlanguage">
<option onclick="alert();"><span>English</span></option>
<option><span>French</span></option>
</select>

use onchange on the select tag--
<select name="setlanguage" id="setlanguage" class="language" onchange="alert('worked')" data-ng-model="setlanguage">
<option>English</option>
<option>French</option>
</select>

Popup Text on a Select list in html

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.

Including images in select dropdown

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.

How can I highlight an option in a dropdown menu?

I have a select with some values in it. each value loads a different webpage.
I want the default value that always shows to be "Select page".
How can I highlight the option for the current page when the user clicks on the dropdown?
By highlight i mean either have it selected or change its background colour or something.
HTML:
<select id="siteId" name="siteId" onchange=".....">
<option value="">Select a page</option>
<option row="1" value="68067">MAIN SITE</option>
<option row="2" value="88616">A</option>
<option row="3" value="88617">B</option>
</select>
EDIT: this select is created dynamically. I can only edit it with java-script after the page renders

If you are looking for jQuery solution then :eq() and attribute selector will be your best bet to look for. I have done something: http://jsbin.com/ojexuh/1/edit
first with :eq()
$('select option:eq(2)').css({"background":"green", "color":"white"});
and attribute selector like this one:
$('select option[row="1"]').css({"background":"red", "color":"yellow"});

option does support background colors within a select. I just set up a simple class to highlight it, as seen via here.
You can add a class like this
$('current page selector').addClass('current');
You could also just manually set it with the css function
$('current page selector').css('background-color', 'red');
You don't really have enough information for me to help you determine how to find the current page. I recommend having some way to tell from the value of the option that you can compare to the current window.location.

There's a lot of variability in browser+OS support for this. Taking Chrome as an example, the dropdown doesn't appear to accept any styling on OS X, but on Windows, background colors can be assigned both in a stylesheet and inline style attribute:
<style type='text/css'>
.highlighted {
background-color: yellow;
}
</style>
<select name='whatever'>
<option value='1'>one</option>
<option value='2'>two</option>
<option value='3' style='background-color: green;'>three</option>
<option value='4' class='highlighted'>four</option>
</select>
Again, both methods work on windows, neither on OS X.
If you want a solution that works everywhere, you need to build your own dropdown control.

Set selected="selected" for the option you want to be the default.
<option row="3" value="88617" selected="selected">B</option>