Hello this is my first post
I am new to web development and having a wired issue .
when i add select options it gets a dublicate text just below it which is labelled as no 2 and i dont want it .
enter image description here
my html code
<select>
<option value="Hafizabad">Pakistan</option>
<option value="Hafizabad">USA</option>
<option value="Hafizabad">Russia</option>
</select>
Please check that options are given inside the select element like below
<select>
<option value="one">One</option>
</select>
Related
I have the following select element where each of the option elements is made up of an img and a span as follows
<select>
<option>
<img src="country-flag"/><span>CountryName</span>
</option>
<option>
<img src="country-flag"/><span>CountryName</span>
</option>
<option>
<img src="country-flag"/><span>CountryName</span>
</option>
<select>
Now when a user picks a country, how do I display only the country flag on the Select Prompt and ignore the text
You only need to copy code from this answer and remove language name texts from options
Unfortunatelly you can not use img tags inside select elements.
You can either use javascript plain/library to mimic the select element or for something simple like countries flags you could use emojies inside the select ->option element.
<select name="countries">
<option value="Plain flag">🇳🇱</option>
<option value="DE">🇩🇪 Germany</option>
<option value="FR">🇫🇷 France</option>
<option value="some emoji">🤪 cool right?</option>
</select>
You can search online for emojies to just copy and paste on your script.
For example you can use this free website: https://getemoji.com/
I have one dropdown list which is created in HTML, that contain several options. That dropdown list has option which are very lengthy. So when I try to see that dropdown list in mobile, the option gets truncated. So How can I make them wrapped into next line?
Below is my code:
<select id="secretques" name="secretques" class="wide100">
<option value="">-----------------SELECT-----------</option>
<option value="A1">What was the first concert you attended?</option>
<option value="A2">What was the name of your first pet?</option>
<option value="A3">What street did you live on in third grade?</option>
<option value="A4">What school did you attend when 10 years old?</option>
<option value="A5">What was last name of your first grade teacher?</option>
<option value="A6">What is the name of city where your parents met?</option>
<option value="A7">What is your maternal grandmother's maiden name?</option>
<option value="B1>(BUSINESS CUST ONLY) WHAT IS YOUR SECRET CODE?</option>
<option value="Q1">What is your favorite food or drink?</option>
<option value="Q2">Who was your favorite teacher?</option>
<option value="Q3">What is the name of your favorite restaurant?</option>
<option value="Q4">What was the name of your childhood pet?</option>
<option value="Q5">What is your favorite sport or hobby?</option>
<option value="Q6">Where was your mother born?</option>
<option value="Q7">What was the name of the 1st school you went to?</option>
</select>
Below is screenshot of what it is looking like:
Dropdown List
Any help will be appreciated...
Edit:1 As suggested in comment I tried using select2 plugin.
I have downloaded "select2-4.0.3" package from github.
And imported CSS file select2.css (select2-4.0.3\select2-4.0.3\dist\css\select2.css) in my project.
Also I have imported JS file select2.js (\select2-4.0.3\select2-4.0.3\dist\js) too.
Then I put below code in my javascript file:
$(function() {
$('.select2').select2({
dropdownAutoWidth: true
});
});
Also I added "select2" class in my dropdown (html file) like below:
<select id="secretques" name="secretques" class="wide100 select2">
</select>
But none of css class of select2 is rendering. Could someone tell me why its not working with me?
add an empty optgroup
<optgroup label=""></optgroup>
which somhow causes mobile browsers to fit the text..
but you do get an emty line at the bottom of your dropdowns
so you can solve that with a little css
<optgroup style="display:none" label=""></optgroup>
see how you go with that
I have a drop down list as follows:
<select id='list'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>
However, on selection of one of these options, I need to see the option selected as "option selected / number of options". For example, if I select 1, I need the drop down to show "1/3" and not just "1". Essentially, I need the "/3" part to be appended to any option that is selected. Does anyone have any ideas for this? Because I seem to have run out of mine.
I think you must be looking like this, which can be done using simple jQuery.
HTML:
<select id='list'>
<option value='1/3'>1</option>
<option value='2/3'>2</option>
<option value='3/3'>3</option>
</select>
<div>
</div>
jQuery:
$("select").change(function(){
var str = $("#list").val();
$("div").html(str);
});
Fiddle: https://jsfiddle.net/shishirmax/rmg75xs3/
Is it possible (using HTML only) to display select with options that span multiple lines each?
It is not possible using html select control.
You can use a div that can act as a dropdown list using JavaScript and css.
not only is it not possible on standard html, but it would then (as an object) become incompatible with the way IOS devices handle the option tag, which is to display a scroll list so it is not even reasonable to want the option tag to behave that way as it would break cross-device compatibility badly and unexpectedly.
as others have answered (i dont have enough reputation to upvote or comment yet) have said, it must be done with css/div styling etc and in that way is a lot more extensible with full html functionality within each of the option tag's as well as (via css styling) being mobile device friendly.
If your case is around iOS truncating long option text, then the solution from How to fix truncated text on <select> element on iOS7 can help.
Add an empty optgroup at the end of the select list:
You can implement like this:
<select>
<option selected="" disabled="">option first</option>
<option>another option that is really long and will probably be truncated on a mobile device</option>
...
<optgroup label=""></optgroup>
</select>
As the presentation of a select element is up to the user agent, I'm afraid you can't have that, unless some UA actually implements it. But select as either a ListBox or ComboBox never really had much need for items spanning multiple lines. Furthermore it would greatly confuse users as they are used to one line = one item.
No.
You could use radio buttons instead though, their <label>s can word wrap.
It would be possible by using some JavaScript with CSS styling on HTML elements, easily done with a framework like Dojo Toolkit. Otherwise, use Radio or Checkbox controls.
If you have lots of options and for that reason looking for multi-line possibility, then there is another trick that can be helpful. Instead of using select and option tag, use datalist and option tag. By this, users can search for their option inside the select area.
<input list="stocks" name="stockArea" placeholder="hello">
<label for="stockArea">Select Your Stock</label>
<datalist id="stocks">
<option value="Microsoft" >
<option value="Lenovo">
<option value="Apple">
<option value="Twitter">
<option value="Amazon">
</datalist>
What about:
<!DOCTYPE html>
<html>
<body>
<select size="13" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
I don't know if this is what you were looking for, but maybe it could help you.
If you want to select multiple options, you must press Ctrl + click to select more options.
If you want to disable multiselect, just erase the "multiple" parameter from the SELECT tag.
I have been hitting a brick wall on this for about an hour now. I have a list of counties that I build and add to my view data (counties) and then render the list with a: html.DropDownList('invoice.county', counties) in my view.
It appears to render correctly but FF REFUSES to set the selected item. I have tried swapping the values out for integers (so they don't match the display text) and that did not work. FF just displays the first item in the list
<select id="invoice_county" name="invoice.county">
...
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
...
</select>
I have trimmed the values to the ones surrounding the selected item.
Can anyone give me insight into this????
Firefox has a weird bug/feature that means if you just refresh the page, it will select the option already selected regardless of whether the selected attribute is on another option. For example, if I put in:
<select id="invoice_county" name="invoice.county">
<option value="Lander">Lander</option>
<option selected="selected" value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
Saved and refreshed in Firefox, then put:
<select id="invoice_county" name="invoice.county">
<option selected="selected" value="Lander">Lander</option>
<option value="Laramie">Laramie</option>
<option value="Larimer">Larimer</option>
</select>
instead and just refreshed after saving, it would keep "Laramie" selected. To stop this, try Ctrl-F5 rather than just F5 or refresh.
If you are using XHTML, you need a valid attribute/value pair:
<option selected="selected" value="x">
If you are using HTML, the mere presence of the attribute is enough:
<option selected value="x">
More information on W3C.