We Keep Coding

Binding a field with #name not working angular 2 mac

I have a form, which contains one drop field and a submit button,
I am trying to enable or disable the button on the basis of the selected value of the drop-down field.
My code looks like this.
<select #drop>
<option value="">Disabled</option>
<option value="1">Enabled</option>
<option value="2">Enabled</option>
</select>
<button [disabled]="!drop.value">
</button>
This is working fine on Safari but does not enable the button in chrome, once the selection is made, unless i click somewhere outside on the window.

If you wish to make it work with template variable you have to "angularize' it, i.e include events or attributes that are recongenized by Angular.
As for the bellow two examples:
1. Use ngModel:
<select #drop ngModel >
<option value="">Disabled</option>
<option value="1">Enabled</option>
<option value="2">Enabled</option>
</select>
<button [disabled]="!drop.value">Button</button>
2. Make use of change or 'input' events:
<select #drop (change)="null" >
<option value="">Disabled</option>
<option value="1">Enabled</option>
<option value="2">Enabled</option>
</select>
<button [disabled]="!drop.value">Button</button>
DEMO

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/

How can I hide default <select> <option> when the drop-down is clicked?

I want to have a <select> element that's default chosen option is "____". In other word's, blank.
When the drop-down is focused, I want the "____" option to not be in the options that can be selected. That way the user has to choose something other than "____" as their option.
Does that make sense?
Illustrations
Closed:
Opened:
As you can see, the option "___" is not in the list when it is being selected. That is my desired end result.
I've tried using onFocus events to remove options, but that just unfocuses the element, and replaces the default option with another one.

You can leverage the hidden attribute in HTML. Try with this example
<select>
<option selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Check this fiddle or the screenshots below.
Before clicking:
After clicking:

To hide the default option, allowing the others to show, there are a few ways to go.
Unfortunately, you can't hide option elements in all browsers. Again, display:none; does not work in all browsers on options ...
In the past when I have needed to do this, I have set their disabled attribute, like so...
$('option').prop('disabled', true);
I've then used the hiding where it is supported in browsers using this piece of CSS...
select option[disabled] {
display: none;
}

CSS is your friend, set display:none for the option you want to hide.
<select>
<option style="display:none" selected="selected" value=""> </option>
<option value="visi1">Visible1</option>
<option value="visi2">Visible2</option>
<option value="visi3">Visible3</option>
</select>
Here's an extra with jQuery that will ensure the first option of any select is invisible:
$('select:first-child').css({display:none;});

On change pass the value of select option box in url

I am trying to pass the value of option box in url on onchange event.I have to pass the value of selected option box to some.php file.Here i am tried out but it's not working for me.
Bellow is my sample code
<select id="font" onchange="document.getElementById('font').src='some.php?fontname='+this.value">
<option value="arial" >arial</option>
<option value="stencil" >stencil</option>
</select>

You need to use javascript location.href for redirecting.
<select id="font" onchange="window.location.href='some.php?fontname='+this.value">
<option value="arial" >arial</option>
<option value="stencil" >stencil</option>
</select>

select box issue in IE when using BOXOVER.js tool tip

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.