I copied a code where it works good in mozilla but, when i go to chrome it doesn't work correctly. I have this in mozilla, where it works like it is an input type where when you type the start letter, the select box will show something like it suggest.
Here is the code :
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" id="labelcheck-up" for="fname">Diagnosis:</label>
<div class="col-sm-2">
<select name="tdiagnosis[]" id="tdiagnosis" class="form-control select2" multiple="multiple" data-placeholder="Please input diagnosis here">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Goat">Goat</option>
</select>
</div>
</div>
</form>
Here is jsfiddle link:
https://jsfiddle.net/DTcHh/40338/
Any suggestions how to make this work in google chrome? Thanks.
Related
As far as I know, ios Chrome is the only browser where my datalist is doing this. Any other browser or device combination seems to work. I know there used to be support issues for datalists but not seeing anything recent that explains the issue I am having. The datalist only does this when the input box receives focus.
<div>
<label></label>
<input id="plist" class="form-control" type="text" list="p" name="p" value="A">
<datalist id="p">
<option>S</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>Aggron</option>
<option>E</option>
<option>F</option>
</datalist>
</div>
IOS requires the value property
<div>
<label></label>
<input id="plist" class="form-control" type="text" list="p" name="p" value="A">
<datalist id="p">
<option value="S">S</option>
...
</datalist>
</div>
I'm wondering why a string when used as the value in a <\select> tag (not ng-select) will load the saved drop down value on a page refresh but an integer will not display a value. Assuming that formData.maritalStatus equals "Married" or "1" depending on the example value below.
This works when formData.maritalStatus = "Married"
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="maritalStatus">Marital Status</label>
<div class="col-sm-4">
<select class="form-control" name="maritalStatus"
ng-model="formData.maritalStatus">
<option value=""></option>
<option value="Married">Married</option>
<option value="Single">Single</option>
<option value="Divorced">Divorced</option>
<option value="Widowed">Widowed</option>
</select>
</div>
</div>
This does not work when formData.maritalStatus = "1"
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="maritalStatus">Marital Status</label>
<div class="col-sm-4">
<select class="form-control" name="maritalStatus"
ng-model="formData.maritalStatus">
<option value=""></option>
<option value="1">Married</option>
<option value="2">Single</option>
<option value="3">Divorced</option>
<option value="4">Widowed</option>
</select>
</div>
</div>
This is purely educational as the string works for my needs.
Unfortunately this does not natively work with older versions of AngularJS. AngularJS 1.6.x and above will work work using the ng-value directive (this will give you what you are looking for).
<option ng-value="1">Married</option>
However, there is a solution that can be found in the AngularJS Docs that essentially uses a parser and formatter. The formatter converts the int-to-string when the model changes and the parser does the opposite (string-to-int).
https://code.angularjs.org/1.4.6/docs/api/ng/directive/select#binding-select-to-a-non-string-value-via-ngmodel-parsing-formatting
Take a look at the link above to view the solution for apps using anything before 1.6.x (taken directly from the AngularJS Documentation). If you haven't taken a look already, I think you could also benefit from using ng-options. It is used to for dynamic lists instead of hardcoded options.
Take a look if you'd like!
https://code.angularjs.org/1.5.11/docs/api/ng/directive/ngOptions
im working on simple form, but I'm get stuck in select options.
Here is my code:
<select title="Pick a number" class="selectpicker">
<option>Select...</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
I wanted width of option list is should be equal to select at any screen size.
How can i achieve this. Thanks!
Since you tagged bootstrap use it like this:
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select title="Pick a number" class="form-control selectpicker" id="exampleFormControlSelect1">
<option>Select...</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
Bootstrap ensures that inputs are displayed properly. Have a look here for more informations.
Suddenly I am in doubt, how do you have a predefined text in a form, but the text cannot be chosen. More like a text there is defining the subject on the form.
I have this short form here.
<div class="form-group">
<label class="sr-only" for="cars">H</label>
<select id="cars" name="cars" class="form-control" required>
<option>Cars</option>
<option>Lamborghini</option>
<option>Volvo</option>
<option>Toyota</option>
<option>Chervolet</option>
</select>
</div>
So the main point is that cars should be in the form field but we should not be able to choose it. Any one knows how to do that?
<option disabled>Cars</option>
http://www.w3.org/TR/html5/forms.html#attr-option-disabled
https://developer.mozilla.org/en/docs/Web/HTML/Element/option#Attributes
I have just started coding in Intel XDK. Instead of showing select items in usual way (drop down menu), i want them to show in popup and select one of item from there. I have gone through several sites, but i could not find a single example which will give me the desired result.
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1" data-native-menu="false" >
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
It seems easy to implement in Jquery. But my problem is , i can only use APIs exposed by Intel XDK. I see there exists javascript file in plugins folder named af.selectBox.js. But i was unable to trace out how to use that. I tried Intel XDK documentation also. But no luck.
If you were inclined to broaden your options, I came across this one, that did what you want. BUT it uses jQuery and Bootstrap:
<div class="form-group">
<label class="control-label col-sm-offset-2 col-sm-2" for="company">Company</label>
<div class="col-sm-6 col-md-4">
<select id="company" class="form-control">
<option>small</option>
<option>medium</option>
<option>large</option>
</select>
</div>
</div>
2nd Answer