I have a simple select like this:
<select [style]="{width : '100%' }" [(ngModel)]="rule.valoreImmesso" class="lm-custom-dropdown">
<option *ngFor="let valore of rule.comboValues" [value]="valore.value">{{valore.label}}</option>
</select>
I want to add an input text inside the dropdown in order to filter the options. Is it possible? How to do it?
You can do like this
<input type="text" list="cars" [(ngModel)]="rule.valoreImmesso"/>
<datalist id="cars">
<option *ngFor="let valore of rule.comboValues" [value]="valore.value"></option>
</datalist>
But datalist tag not supported in Safari So you must write a custom dropdown on your own. You can find some in the internet and modify them as you desired.
Related
Here is the code of an original dataList (select which has an option of customed typing):
<input type="text" list="selectCity" placeholder="select city" />
<data-list id="selectCity">
<option [value]="New York" />
<option [value]="London" />
<option [value]="Paris" />
<option [value]="Beijing" />
<option [value]="Montreal" />
</data-list>
I want to create something like this via <mat-select> .
I saw few questions about it, but the answers were something like- "you can make another input that accepts the customed value..",
but in my app I want to help the user to get the city easily among a very long list of cities. so that solution cannot help me.
I tried something with <mat-form-field> and <input> but that made some problems...
Can you give me any effective solution for this?
<mat-form-field appearance="fill">
<mat-label>select city</mat-label>
<mat-select>
<mat-option value="option">New York</mat-option>
<mat-option value="option">London</mat-option>
<mat-option value="option">Paris</mat-option>
</mat-select>
</mat-form-field>
In this example, you can type a letter, and reach to the first option that starts with that letter.
It will be helpful in case the options are sorted in alphabetical order.
Else, see here: https://material.angular.io/components/autocomplete/examples
I'm unable to set an initial value for a select2 v4.0.1 instance; the select is being created with tags: true.
HTML:
<select id="tags" name="tags" class="form-control" multiple></select>
JS:
$('#tags').select2({'tags': true});
Tried with:
<select id="tags" name="tags" class="form-control" multiple>
<option selected>{{ tag }}</option>
</select>
and:
$('#tags').select2({'tags': true});
$('#tags').val(["test"]).change();
and other smaller variations, to no avail :'(
This documentation snippet seems to have a lead: https://select2.github.io/announcements-4.0.html#removed-initselection but is very confusing, I'm a new user of select2.
According to older posts, this is not an issue at all with the older select2 3 series, but it includes hidden input issues and other nasty stuff.
Does anyone know what I'm missing?
Answering myself :)
Found two viable slightly different ways:
Add static child <option> elements
<select id="tags" multiple="multiple" autocomplete="off">
<option selected>test1</option>
<option selected>test2</option>
</select>
<script type="text/javascript">
$('#tags').select2({tags: true});
</script>
Dynamically add child <option> elements, then trigger a change
<select id="tags" multiple="multiple" autocomplete="off"></select>
<script type="text/javascript">
$('#tags').select2({tags: true});
$('#tags').append("<option selected>test1</option><option selected>test2</option>").change();
});
</script>
The val() method works only for selecting an option, not for adding/removing options to a select multiple.
<select data-native-menu="true" id="food_type" multiple="multiple" data-placeholder="Favourite food types" class="chzn-select-tag photo-status-update-tags" multiple="" tabindex="-1">
<option data-placeholder='true' value="" disabled="disabled">Favourite food types</option>
<?php foreach($this->aFoods as $aFood): ?>
<option value="<?php echo $aFood['food_name']; ?>" ><?php echo $aFood['food_name']; ?></option>
<?php endforeach; ?>
</select>
jQuery('#food_type').on('change', function() {
if (this.selectedOptions.length <= 5) {
jQuery(this).find(':selected').addClass('selected');
jQuery(this).find(':not(:selected)').removeClass('selected');
} else {
jQuery(this)
.find(':selected:not(.selected)')
.prop('selected', false);
}
});
Here is my code.I had limited the selected option to 5.Its working.But in multi select popup it is possible to select more than 5.My requirement is,if anyone tries to select more than 5 options, disable selection in multi select popup.I am using jquery mobile 1.2.1
The issue is fixed now..I have changed the style of multi select popup by changing the <select> attribute 'data-native-menu="false"'. Just like below:
<select data-native-menu="false" id="food_type" multiple="multiple" data-placeholder="Favourite food types" class="chzn-select-tag photo-status-update-tags" multiple="" tabindex="-1">
I'm programming my first mobile app using Icenium, PhoneGap and jQuery Mobile.
I have several select elements on different pages.
In Android it is working like expected. But in iOS and Icenium's iOS simulator, it is not. When you tap the element, you see in a fraction that it opens the options like a regular HTML option list and than it jumps immediately back to the previous page.
I have no errors and I don't know where to start to find the solution. I have search on Google, but no one does seem to have this kind of problem.
The html is looking like this:
<label class="cornerlogospan" for="ddlLanguage">Language</label>
<select class="settingselectfield" id="ddlLanguage" data-bind="value: Settings().UILanguage">
<option value="nl">Dutch</option>
<option value="fr">French</option>
<option value="en">English</option>
</select>
Generated html:
<label class="cornerlogospan">Language:</label>
<div class="ui-select">
<div id="ddlLanguage-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
<span class="settingselectfield">English</span>
<select class="settingselectfield" id="ddlLanguage" data-bind="value: Settings().UILanguage">
<option value="nl">Dutch</option>
<option value="fr">French</option>
<option value="en">English</option>
</select>
</div>
Edit
After the suggestion of Omar, I did add the data-native-menu="false" attribute. The page doesn't change anymore, but the page doesn't change anymore. http://www.youtube.com/watch?v=szVv2QfSH9M I still can't select a language. This is also the case in Android now.
I´m trying to fetch the values from a html drop down using a webview which is populated with a segmented controller.
Anyone know how to enter an
NSString *string [NSString stringWithFormat:#"document.getElementsBy
for the following html code and to select one of the option values
<div id="loginselect" style="clear:both:">
<select name="usertype" size="1" id="usertype" class="select1" >
<option value="0" selected="selected">Staff</option>
<option value="1" >Student</option>
<option value="2" >Parent</option>
document.getElementByID('usertype').value
The answer from sixthcent gave the right answer. I just had to add the value like this:
document.getElementById('usertype').value='1'