edit: see "Edit" Section for updated question
I am trying to make the second dropdown selection dependent of the first, using jquery.
get "data-type" of first selection
if "data-type" == "String" trigger filter change of second selections "data-foo" containing value N
HTML Selections
<select id="first" name="first-selection" class="form-control">
<option value="a" class="b" data-type="c">a</option>
</select>
<select id="second" name="second" class="form-control">
<option value="n" data-foo="m">n</option>
</select>
I used to following code to check if I am able to get the "data-type" value and display it. But any attempt to get the data for an if statement failed so far.
$('#first').change(function () {
var selected = $(this).find('option:selected');
$('#type').html(selected.data('type'));
}).change();
edit - code with if statement
how do I use "data-type" for an if statement?
EDIT
New code and jsfiddle to make myself clear
<select id="first" name="first-selection" class="form-control">
<option value="1" class="type1" data-type="snowboot">bli</option>
<option value="2" class="type2" data-type="nose">bla</option>
<option value="3" class="type3" data-type="head">blu</option>
</select>
<p>Test output: <span id="type"></span>.</p>
<select id="second" name="second-selection" class="form-control">
<option value="11" data-foo="green">one of three</option>
<option value="22" data-foo="red">two of three</option>
<option value="33" data-foo="red">three of three</option>
</select>
$(function(){
$('#first').change(function(){
var selected = $(this).find('option:selected');
$('#type').html(selected.data('type'));
}).change();
});
Question
How do I use "data-type" and put it as an if statement before the function? The following won't do anything
if ($('select[id=first] option').filter(':selected').type() == "nose")
if(selected.data('type') == "nose")
var myvar = $('#first option:selected').data();
if(myvar == 'nose')
This is the code I want to run after the if statement:
var $firstvar= $("#first");
$secondvar= $("#second");
$options = $secondvar.find('option')
$firstvar.on('change', function () {
$secondvar.html($options.filter('[data-foo="' + 'red' + '"]'));
}).trigger('change');
This will do what you want. It will check, whether the selected option of the first select was of any of the types mentioned in the object conditions and will then go through all options of the second select and either show or hide them (using the jQuery .toggle(.toggle(!isNose||this.dataset.foo==="red")) method). The expression show=!found||this.dataset.foo===found will evaluate to true for all cases where found is undefined and to false only if found is "trueish" AND this.dataset.foo===found is false.
$(function() {
const conditions={nose:"red",head:"green"}; // add as many as you like ...
$('#first').change(function() {
let show,first=true; // first makes sure only ONE option can be set
const found=conditions[ $(this).find(":selected").data("type") ];
$('#second option').each(function(){
$(this).toggle(show=!found||this.dataset.foo===found);
if(first&&show) first=!(this.selected=true); // select first visible option
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="first" name="first-selection" class="form-control">
<option value="1" class="type1" data-type="snowboot">bli</option>
<option value="2" class="type2" data-type="nose">bla</option>
<option value="3" class="type3" data-type="head">blu</option>
</select>
<p>Test output: <span id="type"></span>.</p>
<select id="second" name="second-selection" class="form-control">
<option value="11" data-foo="green">one of three</option>
<option value="22" data-foo="red">two of three</option>
<option value="33" data-foo="red">three of three</option>
</select>
I have a drop down which by default on page load it select "PLEASE SELECT USECASE" in the dropdown
But i am expecting "EUC Proxy" to be selected on page load instead of "PLEASE SELECT USECASE"
HTML IS SHOWN BELOW
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option value="-1" [selected]="isSelected"> Please Select Use Case </option>
<option *ngFor="let uc of useCaseList" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
*HTML i CHANGED TO *
[selected]="1"
But it doesn't made any difference.See the changed HTML Below
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option *ngFor="let uc of useCaseList" [selected]="1" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
SAME IN IMAGE
I am getting "test Bot" selected in drop-down, which is last item in the drop down like below:
But i am expecting this: where uc.BOTId =1 is "EUC Proxy" Not "test Bot"
TS file
ngOnInit() {
getUsecaseList() {
this.manageBotService.getAllBots().subscribe(res => this.useCaseList = res);
}
}
Why i am unable to select "EUC Proxy" which having uc.BOTId =1 on page load?
Remove [selected] from your options.
The [(ngModel)] part from your 'select' will set the value to selected (depending on the value the 'scheduleModel.UsecaseId' has.
I didn't see you using the instruction that makes it default:
value='default'
for instance:
<select name='test'>
<option value='default' selected='selected'>Please select the value</option>
<option value='value1'>value1</option>
<option value='value2'>value2</option>
</select>
Set scheduleModel.UsecaseId = 1 after loading the drop-down on ng-init().
The default option ('Choose Default Meta Data') is not rendering but selected as view, anyone can help?
<div class="input-field col s12">
<select id="custom-select-f" v-model="meta_id" class="browser-default">
<option value="" disabled :selected="meta_id ? false : true">Choose Default Meta Data</option>
<option value="">Set As None</option>
<option v-for="meta in metas" :value="meta.id">{{meta.data}}</option>
</select>
<label for="custom-select-f" class="active">Meta Data</label>
</div>
Instead of binding to the selected attribute, I gave the option a 'fake' value:
https://jsfiddle.net/DarkFruits/5mk2hrfn/
<select name="" id="select" v-model='name'>
<option value="none" disabled >None</option>
<option value="max" >Max</option>
<option value="alex" >alex</option>
<option v-for='n in names' :value="n">{{n}}</option>
</select>
new Vue({
el: '#select',
data() {
return {
names: ['Sandy', 'Pete'],
name: 'none',
}
}
})
In my HTML:
<div class="main">
<label>Select an option </label>
<select>
<option value="user123"> user123 </option>
<option value="user234"> user234 </option>
<option value="user345"> user345 </option>
<option value="user456"> user456 </option>
<option value="Other"> Other </option>
</select>
<input type="text" style="visibility:hidden" maxlength="7" id="custom" </input>
</div>
In my typescript:
if(input=="Other") {
(<HTMLInputElement>document.getElementByID('custom').removeAttribute('style')
}
By doing this, it will activate a text box when the user select Other from the dropdown. But if the user changes his/her mind to the regular option(without activating the text box), the text box will still stay. I understand the cause of this issue is because I removed the hidden attribute. So is there a way to show the text box only when the user select Other and hide the text box for other cases.
Another question is how to force the user to only input "userXXX" into the text box?
Thank you!
I would just use a boolean to show and hide the element. So check if the checkbos is checked, and set it to visible, otherwise set it to false
var element = <HTMLInputElement> document.getElementById("otherchk");
var isChecked = element.checked;
isChecked ? this.isVisible : !this.isVisible
Then use the hidden selector in your html
<div class="main">
<label>Select an option </label>
<select>
<option value="user123"> user123 </option>
<option value="user234"> user234 </option>
<option value="user345"> user345 </option>
<option value="user456"> user456 </option>
<option value="Other" id="otherchk"> Other </option>
</select>
<input type="text" [hidden]="isVisible == false" maxlength="7" id="custom" </input>
</div>
I am trying to make a dropdown list that contains a placeholder. It doesn't seem to support placeholder="stuff" as other forms do. Is there a different way to obtain a placeholder in my dropdown?
Yes just "selected disabled" in the option.
<select>
<option value="" selected disabled>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
Link to fiddle
You can also view the answer at
https://stackoverflow.com/a/5859221/1225125
Use hidden:
<select>
<option hidden >Display but don't show in list</option>
<option> text 1 </option>
<option> text 2 </option>
<option> text 3 </option>
</select>
dropdown or select doesn't have a placeholder because HTML doesn't support it but it's possible to create same effect so it looks the same as other inputs placeholder
$('select').change(function() {
if ($(this).children('option:first-child').is(':selected')) {
$(this).addClass('placeholder');
} else {
$(this).removeClass('placeholder');
}
});
.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control placeholder">
<option value="">Your Placeholder Text</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
if you want to see first option in list remove display property from css
Most of the options are problematic for multi-select.
Place Title attribute, and make first option as data-hidden="true"
<select class="selectpicker" title="Some placeholder text...">
<option data-hidden="true"></option>
<option>First</option>
<option>Second</option>
</select>
If you are initializing the select field through javascript, the following can be added to replace the default placeholder text
noneSelectedText: 'Insert Placeholder text'
example: if you have:
<select class='picker'></select>
in your javascript, you initialize the selectpicker like this
$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});
Add hidden attribute:
<select>
<option value="" selected disabled hidden>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
Try this:
<select class="form-control" required>
<option value="" selected hidden>Select...</option>
when using required + value="" then user can not select it
using hidden will make it hidden from the options list, when the user open the options box
Try #title = "stuff". It worked for me.
All this options are.... improvisations.
Bootstrap already offers a solution for this.
If you want to change the placeholder for all your dropdown elements you can change the value of
noneSelectedText
in the bootstrap file.
To change individualy, you can use TITLE parameter.
example:
<div class="form-group">
<label class="control-label col-xs-2" id="country">Continent:</label>
<div class="col-xs-9">
<select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple >
<option value="Africa">Africa</option>
<option value="Asia">Asia</option>
<option value="North America">America North</option>
<option value="South America">America South</option>
<option value="Antarctica">Antarctica</option>
<option value="Australia">Australia</option>
<option value="Europe">Europe</option>
</select>
</div>
</div>
Using Bootstrap, This is what you can do. Using class "text-hide", the disabled option will be shown at first but not on the list.
<select class="form-control" >
<option selected disabled class="text-hide">Title</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
in bootstrap-select.js Find title: null, and remove it.
add title="YOUR TEXT" in <select> element.
Fine :)
Example:
<select title="Please Choose one item">
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
I think, the Dropdown box with a class and JQuery code to disable the first option for user to select, will work perfectly as Select Box placeholder.
<select class="selectboxclass">
<option value="">- Please Select -</option>
<option value="IN">India</option>
<option value="US">America</option>
</select>
Make the first option disabled by JQuery.
<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>
This will make the first option of Dropdown as Placeholder and user will no longer able to select the first option.
Hope It helps!!
The right way to achieve what you are looking for is to use the title attribute.
The title global attribute contains text representing advisory information related to the element it belongs to.
title="Choose..."
for example:
<select class="form-control selectpicker" name="example" title="Choose...">
<option value="all">ABCDEFG</option>
<option value="all">EFG</option>
</select>
check the documentation for more info about bootstrap-select
custom-button-text
Here's another way to do it
<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required>
<option value="">Choose Platform</option>
<option value="iOS">iOS</option>
<option value="Android">Android</option>
<option value="Windows">Windows</option>
</select>
"Choose Platform" becomes the placeholder and the 'required' property ensures that the user has to select one of the options.
Very useful, when you don't want to user field names or Labels.
Bootstrap select has an noneSelectedText option. You can set it via data-none-selected-text attribute.
Documentation.
For .html page
<select>
<option value="" selected disabled>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
for .jsp or any other servlet page.
<select>
<option value="" selected="true" disabled="true">Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
Using bootstrap, if you need to also add some values to the option to use for filters or other stuff you can simply add the class "bs-title-option" to the option that you want as a placeholder:
<select class="form-group">
<option class="bs-title-option" value="myVal">My PlaceHolder</option>
<option>A</option>
<option>B</option>
<option>c</option>
</select>
Bootstrap adds this class to the title attribute.
Solution for Angular 2
Create a label on top of the select
<label class="hidden-label" for="IsActive"
*ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
[(ngModel)]="filterIsActive" id="IsActive">
<option value="true">true</option>
<option value="false">false</option>
</select>
and apply CSS to place it on top
.hidden-label {
position: absolute;
margin-top: .34rem;
margin-left: .56rem;
font-style: italic;
pointer-events: none;
}
pointer-events: none allows you to display the select when you click on the label, which is hidden when you select an option.
angular html css
<option value="" defaultValue disabled> Something </option>
you can replace defaultValue with selected but that would give warning.
This is for Bootstrap 4.0, you only need to enter selected on the first line, it acts as a placeholder. The values are not necessary, but if you want to add value 0-... that is up to you.
Much simpler than you may think:
<select class="custom-select">
<option selected>Open This</option>
<option value="">1st Choice</option>
<option value="">2nd Choice</option>
</select>
This is link will guide you for further information.