Develop Reference

How to remove blank option from select when ng-model is empty?

I have a scenario where I have a select dropdown with a refresh button and a plus button. When I click on the refresh button the model is set to null, but when I click on the plus button the dropdown is shown with empty option. So, I need to display the dropdown without empty option, where ng-model is null only.
Here is my code:
<div class="col-xs-6 npd">
<div ng-if="minAge==null">
<select ng-options="minAge.val as minAge.txt for minAge in ddloptions" ng-model="minAge" ng-change="ageCheck()">
</select>
<p>Select <br><span>Minimum age</span></p>
</div>
<div ng-if="minAge!=null">
<a ng-click="minAgeRmv()"><img src="images/prf-mprmv.png" /></a>
<p>Minimum age <br><span>{{minAge}}</span></p>
</div>
</div>
Any help would be appreciated.

In case you want to remove the empty option, you can put this empty option inside select <option value="" style="display:none;">Select Age ...</option>

I think this should work. It will filter out anything that is null (All values where minAge.txt is not null).
<select ng-options="minAge.val as minAge.txt for minAge in ddloptions | filter:{minAge.txt:'!!'}"
ng-model="minAge" ng-change="ageCheck()">

Use Array.prototype.filter method to filter out any property with a null
ddloptions = ddloptions.filter(function(item) {
return item.minAge !== null;
});
Either use it inside your controller when you refresh your data or put it inside an Angular Filter

Semantic UI: Dropdown default/placeholder value issue

I'm working on creating a html form using 'Semantic UI' framework. While I'm using a normal select item for a dropdown/select list, I'm styling it using Semantic UI. Everything works fine, but once I select a value from the dropdown, I can't deselect the option/value as an end user.
Suppose in this FIDDLE , if I select 'male', and again want to de-select the option and show the placeholder/default text 'Gender', I'm not able to. Can someone help me figure out a way to make the select work as a regular html select item rather than a dropdown ?
HTML Code
<div class="field">
<label style="width: 250px">Select a Gender</label> <select
name="skills" class="ui fluid dropdown">
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
JavaScript Code
$(".ui.fluid.dropdown").dropdown({})

Try this :
$('select.dropdown').dropdown({placeholder:'Your placeholder'});
see Semantic UI (or Semantic UI CN for a Chinese version) for more info.

In the classic HTML <select> element, it treats your empty valued <option value="">Gender</option> as another dropdown menu item.
However, Semantic UI uses the empty valued <option> as the placeholder text. If you want Gender as a selectable option, it should really be another item that is independent of your placeholder text.
If you want the ability to clear the selection, I think there are better UX paradigms to handle this. For example, you could have an external clear selection button which calls:
$('.ui.fluid.dropdown').dropdown('clear')
Another more streamlined option might be to use the multi-selection dropdown, and limit the maxSelections = 1, the first example from the examples page. That way the user gets an impression that they have selected something, and to clear the selection they use an element within the same dropdown container.

You should know that .dropdown() in Semantic UI removes any null value from your select by default.
Nevertheless, there are some approaches to what you are looking for.
Check this fiddle.

You can achieve this with the snippet below.
<div class="ui selection dropdown">
<input name="gender" type="hidden" value="default">
<i class="dropdown icon"></i>
<div class="text">Default Value</div>
<div class="menu">
<div class="item" data-value="default">Default Value</div>
<div class="item" data-value="0">Value</div>
<div class="item" data-value="1">Another Value</div>
</div>
</div>
You can take a look at here https://semantic-ui.com/modules/dropdown.html#/examples. Also you can use 'clearable'.
If you wanna pass this value to back-end, keep in mind that the selected value is in the input.

$('.ui.dropdown').dropdown({
clearable: true
});

How to add a DIV to select option using javascript

My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?

Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.

Chained or Dependent Select Zend_Form jQuery to remove or replace the form elements?

I have been using Zend Framework 1 to create a dependent/chained Zend_Form.
When a Zend_Form_element_Select another Zend_Form_Element_Select is added to the form with correct fields dependant on the first select's value.
So I add the new Select with a:
$("#city-label").before(data);
which will insert the new select before the city label.
The problem arises when the first select's value is changed again. Then a new Select is added to the form. I would Ideally like the old satellite element that is the label and the select to be removed.
<dt id="satellite-label">
<label for="satellite" class="optional">Satelite</label>
</dt>
<dd class="ui-select">
<select name="satellite" id="satellite">
<option value="--Select One--" label="--Select One--">--Select One--</option>
<option value="5" label="Alex">Alex</option>
<option value="6" label="Patro">patro</option>
<option value="7" label="Zozo ">Zozo</option>
</select></dd>
<dt id="city-label"><label for="city" class="optional">City</label></dt>
And then replaced with the new element.

Try this from within your AJAX success:
$("#satellite-label").remove();
$("#satellite").parent().remove();

You should keep track of the new element so you can remove it when the value changes again:
var currentLabel;
...
if (currentLabel) {
currentLabel.remove();
}
currentLabel = $(data);
$("#city-label").before(currentLabel);

try this ...
$("#satellite_elem-label").remove();
$("#satellite_elem").parent().remove();;
$("#city-label").before(newElement);

You can use a hidden input (Zend_Form_Element_Hidden) then simply replace the hidden element.
$("#target-element").html(data);
Don't forget to use same id (target-element) on html content of data.
This way you can also add backend validators to this hidden element to use isValid method.

You must remove previous inserted select before insert another on first select's value is changed again.
So it may be help in your case.
$("#city-label").prev('.ui-select').remove();
$("#city-label").prev('#satellite-label').remove();
$("#city-label").before(data);
or simply add this
$("#city-label").prev().remove();
$("#city-label").prev().remove();
$("#city-label").before(data);
It will remove select then label and insert new select before insert new one.

Display content based on Select Menu dropdown change

I'm currently using the following to display an input field when I change a dropdown menu selection:
<select id="delivery_country" name="d_country" onchange="
if (this.selectedIndex==14){
this.form['statesUSA'].style.visibility='visible'
}else {
this.form['statesUSA'].style.visibility='hidden'
};">
However, this only changes the input form element called "statesUSA".
If I want to show the div that this form element is inside, how do I do this?
For the record, my HTML reads:
<div id="usa">
<input type="text" id="statesUSA" />
</div>
Many thanks for any pointers.

use document.getElementById(id)
this:
<select id="delivery_country" name="d_country" onchange="if (this.selectedIndex==14){document.getElementById('usa').style.visibility='visible'}else {document.getElementById('usa').style.visibility='hidden'};">