Develop Reference

ajax / jquery trying to append new options to select

I'm trying to load a list of locations via ajax / jquery. Each time I type a letter into the input I get the first respponse back with subsequent responses appended. I've tried using .html('') and .empty() but not getting the desired results. I want the list to clear each time and return the new input results.

See this my example , clear select first by empty and then append new option value !!!
$('#ss').empty();
$('#ss').append($('<option>').html('test'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ss">
<option>$$</option>
<option>55</option>
</select>

Select all option and .remove() should work
function clearSelectFields(){
$('#selectField')
.children() // Select children of the select field
.remove(); // Remove all the selected element
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectField">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button onclick="clearSelectFields()">Clear</button>

Toggling ng-selected

I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.

Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>

It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.

How to get all select elements having their with multiple selection criteria, jquery?

How to get all dropdowns having on the basis of multiple attributes name and value.
$('input[name="ABC"][value="-1"]') this expression seems to work, but for drop downs this doesn't seems working.
<select name="department" />
<option value="-1" selected="selected">Select One</option>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
alert($("select[name=department][value=-1]").length);
gives 0 in alert box.
refer to this fiddle.
http://jsfiddle.net/8QBH7/

alert($("select[name=department] option[value=-1]").length);

I believe this is the query you're looking for:
$("select[name='department'] option[value=-1]")
See fiddle demo
Edit based on your feedback I think you want to use the selected pseudo class. Fiddle
alert($("select[name=department] :selected").val());
$("select").on("change",function(){
alert($("select[name=department] :selected").val());
});

Why my select onchange is not working?

I have this code:
<select>
<option onChange="filterProducts(this);">Select ...</option>
<option onChange="filterProducts(this);">Samsung</option>
<option onChange="filterProducts(this);">LG</option>
<option onChange="filterProducts(this);">Sony</option>
<option onChange="filterProducts(this);">Philips</option>
</select>
Which should fire a js method but it simply does not fire:
function filterProducts(firedByControl){
alert(fired);
}
For this button, calling the same js method, all works nice:
<button type="button" class="btn" onclick="filterProducts(this)" value="LCD">LCD</button>
Can you please tell me where I am wrong?

You need to put the onchange call on the element.
<select onChange="filterProducts(...);">
<option>Select ...</option>
<option>Samsung</option>
<option>LG</option>
<option>Sony</option>
<option>Philips</option>
</select>

Move the onchange to the select like below,
<select onchange="filterProducts">

I believe that onchange should be an attribute of the <select> element, not each <option>.

do this instead <select onchange="filterProducts(this);">

You need to place the onchange attribute on the select, not on the option.
By the way, you should probably do something like that using JQuery :
$("select").onChange(filterProducts);

How to fire a change event on a HTMLSelectElement if the new value is the same as the old?

I have the following markup:
<select onchange="jsFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
When a user pulls down the combobox and selects the same option that was previously selected (or doesn't change the selection at all), JavaScript doesn't regard it as an onchange event. So, the jsFunction() is not called. But I want the jsFunction() called even in this case. How can I achieve this?

I'd do it like this:
<select onchange="jsFunction()">
<option value="" disabled selected style="display:none;">Label</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
If you want you could have the same label as the first option, which in this case is 1.
Even better: put a label in there for the choices in the box.

You have to add empty option to solve it,
I also can give you one more solution but its up to you that is fine for you or not Because User select default option after selecting other options than jsFunction will be called twice.
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
alert(myselect.options[myselect.selectedIndex].value);
}

Just set the selectIndex of the associated <select> tag to -1 as the last step of your processing event.
mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1;
It works every time, removing the highlight and allowing you to select the same (or different) element again .

Try this. Just add an empty option. This will solve your problem.
<select onchange="jsFunction()">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>​

For this problem, I have finally put a new <i> tag to refresh the select instead. Don't try to trigger an event if the selected option is the same that the one already selected.
If user click on the "refresh" button, I trigger the onchange event of my select with :
const refreshEquipeEl = document.getElementById("refreshEquipe1");
function onClickRefreshEquipe(event){
let event2 = new Event('change');
equipesSelectEl.dispatchEvent(event2);
}
refreshEquipeEl.onclick = onClickRefreshEquipe;
This way, I don't need to try select the same option in my select.

use the "onmouseup" property with each option element. it's verbose, but should work. also, depending on what your function is actually doing, you could arrange things a little differently, assuming the number is important in the handler:
<select>
<option onmouseup="handler()" value="1">1</option> //get selected element in handler
<option onmouseup="handler(2)" value="2">2</option> //explicitly send the value as argument
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary
</select>

JavaScript code:
on mousedown event: set selectedIndex property value to -1
on change event: handle event
The only drawback is that when the user clicks on the dropdown list, the currently selected item does not appear selected

It's not firing because the value hasn't "changed". It's the same value. Unfortunately, you can't achieve the desired behaviour using the change event.
You can handle the blur event and do whatever processing you need when the user leaves the select box. That way you can run the code you need even if the user selects the same value.