Question
i want to make my select tag like google's one
this is mine
This is my code
`<script >
function format(state) {
if (!state.id) return state.text;
return "<img class='flag' src='Photos/" + state.id.toLowerCase() + ".jpg'/>" + $(originalOption).data('foo') + "' />" + state.text;
}
</script>
<select id="mobilephone">
<option value="indo" ><img src="Photos/indo.jpg" id="captchaimg">Indonesia</option>
<option style="background-image:url(Photos/rico.png);">Rico</option>
<option style="background-image:url(Photos/SA.png);">South Africa</option>
<option style="background-image:url(Photos/UK.jpg);">United Kingdom</option>
</select>`
I want to make it like image below
If you are using jQueryUI, then this may work : http://jqueryui.com/selectmenu/#custom_render
This seems quite neat : http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx
You cannot do this directly using the <select> tag since that is a form element, but you can implement this using <div> or other methods.
A work-around to this could be :
<select>
<option style="background-image:url(something.png);">male</option>
<option style="background-image:url(something.png);">female</option>
<option style="background-image:url(something.png);">others</option>
</select>
But this would only work in Firefox :(
Personally I would recommend using some JS widget library like the one above.
Hope this helps!
You can simply use the emoji for each flag.
<select id="mobilephone">
<option selected disabled>Select country</option>
<option>🇮🇩 Indonesia</option>
<option>🇵🇷 Puerto Rico</option>
<option>🇿🇦 South Africa</option>
<option>🇬🇧 United Kingdom</option>
</select>
Related
I have two selects with the same values
eg:
<select id="1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
How can I prevent user not to choose the same values on both boxes?
I am populating the select values with PHP from a database.
EDIT:
I arrived on this: jsfiddle
But it needs improvement when changing a value already selected.
First of all HTML and CSS are not designed for something like that.
Said that,maybe you can hack CSS to do something similar but
since <option> inside both <select> haven't any relationship (Child-Parent, Sibling...) you can not use CSS pseudo selector (:checked)to disable options like that:
(this code wont work for this case but it would remove duplicates if the options will be in the same <select> because they would be sibling)
[value="volvo"]:checked + [value="volvo"] {display: none;}
$('#1').change(function() {
$("#2").not($(this)).find("option[value='" + $(this).val() + "']")
.prop("disabled", true)
.siblings().removeAttr('disabled');
});
Fiddle
You can remove the siblings part if you don't want to re-enable previously selected options.
$( document ).ready(function() {
$(function(){
$('select').change(function() {
$current=$(this);
$("select").not($current).children("option[value='"+$current.val()+"']").attr('disabled', "disabled");
});
});
});
I arrived on what I wanted. https://jsfiddle.net/zrr9ngj8/2/
<select name="cat" class="input">
<option value="">----------Select Category--------</option>
<option value="Finance">Finance</option>
<option value="Travel">Travel</option></select>
<!--basing on the option selected in HTML code I would like to display Options in the below select-->
<select name="scat" class="input">
<option value="">---------Select subcategory------</option>
<option value="Financial Planning">Financial Planning</option>
<option value="Financial Control">Financial Control</option>
<option value="Corporate Finance">Corporate Finance</option>
<option value="Financial Management">Financial Management</option>
<option value="Financial Statement">Financial Statement</option>
<option value="Travel Planning">Travel Planning</option>
<option value="Travel Management">Travel Management </option>
<option value="Corporate Travel">Corporate Travel</option>
</select><br>
How to make that possible in HTML? Can I use statements like if... else in HTML???
What should i do to achieve that Dynamic Enabling and Disabling in HTML?
First you need to reference a JQuery Lib in your HTML page. You can follow this link to understand it.
And then you will need a data structure to map the relationship between categories and the subcategories. It can look like this:
suppose also you have added id attributes to each select same as their respective name.
var catAndSubCats= {
Finance: ["Financial Planning", "Financial Control","Financial Management",
"Financial Statement"],
Travel: ["Travel Planning","Travel Management", "Corporate Travel"]
}
Then you need to write an onchange handler for $('select[name=cat') inside which you need to filter the $('select[name=scat]) options based on the selected options text in cat.
With that you use an event to populate your select subcat based on what the cat is:
<script>
$(document).ready(function(){
$("#cat").change(function () {
var $selectedCat = $(this).find('option:selected').text();
$("#subCat").html($("#subcat").filter(function () {
return $.inArray($(this).text(), catAndSubCats[$selectedCat ]) >= 0;
});
});
</script>.
You can put above code in your head tag in your HTML file. Please don't forget the reference for JQuery Library
I am inspired via this solution.
I hope it will help you
As was stated above, you will need to link to the jQuery library. Here is my solution, which requires adding some classes to your HTML (note, I did this all inline for the sake of time):
EDIT**: It turns out there's a 'disabled' property for options in a select box. My last code did not work properly. This one should. Please see updated fiddle at the end.
<select name="cat" class="first">
<option value="">----------Select Category--------</option>
<option class="finance" value="Finance">Finance</option>
<option value="Travel">Travel</option></select>
<!--basing on the option selected in HTML code I would like to display Options in the below select-->
<select name="scat" class="second">
<option value="">---------Select subcategory------</option>
<option class="finance" value="Financial Planning">Financial Planning</option>
<option class="finance" value="Financial Control">Financial Control</option>
<option class="finance" value="Corporate Finance">Corporate Finance</option>
<option class="finance" value="Financial Management">Financial Management</option>
<option class="finance" value="Financial Statement">Financial Statement</option>
<option value="Travel Planning">Travel Planning</option>
<option value="Travel Management">Travel Management </option>
<option value="Corporate Travel">Corporate Travel</option>
</select><br>
<!-- Copy and past everything below right before the closing </body> tag in your HTML -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$('select.first').change(function(){
var sel = $('select.first option').map(function(){
return $(this).attr('class');
});
for (i = 0; i < sel.length; i++) {
if ($('select.first option:selected').hasClass(sel[i])) {
$('select.second option').not('select.second option:first-child, .' + sel[i]).prop('disabled', true);
$('select.second option.' + sel[i]).prop('disabled', false);
}
}
});
});
</script>
Here's a JSFiddle: http://jsfiddle.net/SQm9T/1/
I'm trying to create a dropdown with three colors in each option, so the user can select his preferred color scheme.
I was trying to use Bootstrap Select (http://silviomoreto.github.io/bootstrap-select/) for this, with the following code:
<select class="selectpicker" name="color_scheme" id="color_scheme">
<option value="1" data-content="<div style='height:15px;width:15px;background:red;float:left'></div><div style='height:15px;width:15px;background:green;float:left'></div><div style='height:15px;width:15px;background:blue;float:left;clear:right'></div>"></option>
<option value="2" data-content="<div style='height:15px;width:15px;background:gray;float:left'></div><div style='height:15px;width:15px;background:orange;float:left'></div><div style='height:15px;width:15px;background:yellow;float:left'></div>"></option>
</select>
That doesn't work that well though, because of the floating. Is there a way to fix that, or is there a better way to achieve what I need?
I ended up using Select2, with the templating option:
<select>
<option value="0" data-foo="bar">option one</option>
...
</select>
function format(state) {
var originalOption = state.element;
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + $(originalOption).data('foo') + "' />" + state.text;
}
Hi Ladies and Gentlemen,
Where I work is currently transitioning to a site using Drupal 7. We are trying to get a temporary site up and running until our new site is finished. I am a complete newbie to Drupal, but managing ok. Anyway I have a page that has an onchange select box which is supposed to open a PDF file. I am unclear how to make the onchange function work. I have looked on several pages but everything is a little confusing. Here is the code I need to change :
<form name="cataloglinks" action="">
<p class="style2">
<span class="style3">
Other editions of the online DACC catalog are also available:
<select name="cataloglinks-list" size="1" id="cataloglinks-list onchange="goPage(this.options[this.selectedIndex].value)">"
<option value="." selected="selected">Select an edition</option>
<option value="catalog/catalog08-09.pdf">Catalog for 2008-2009</option>
<option value="catalog/catalog09-10.pdf">Catalog for 2009-2010</option>
<option value="catalog/catalog10-11.pdf">Catalog for 2010-2011</option>
<option value="catalog/catalog11-12.pdf">Catalog for 2011-2012</option>
<option value="catalog/catalog12-13.pdf">Catalog for 2012-2013</option>
<option value="catalog/catalog13-14.pdf">Catalog for 2013-2014</option>
Your issue has nothing to do with Drupal, it might be a HTML tags issue or missing goPage() javascript function.
Try to implement the following code:
<script type="text/javascript">
function goPage(path) {
if(path != '') {
window.location = [location.protocol, '//', location.host, '/'].join('') + path;
}
}
</script>
<select name="cataloglinks-list" size="1" id="cataloglinks-list" onchange="goPage(this.options[this.selectedIndex].value);">
<option value="" selected="selected">Select an edition</option>
<option value="catalog/catalog08-09.pdf">Catalog for 2008-2009</option>
<option value="catalog/catalog09-10.pdf">Catalog for 2009-2010</option>
<option value="catalog/catalog10-11.pdf">Catalog for 2010-2011</option>
<option value="catalog/catalog11-12.pdf">Catalog for 2011-2012</option>
<option value="catalog/catalog12-13.pdf">Catalog for 2012-2013</option>
<option value="catalog/catalog13-14.pdf">Catalog for 2013-2014</option>
</select>
Note: I assumed that catalog folder is in the root directory of your site.
I've got a select option menu for example with 10 options. When I open the page I want it to be on the 5 element. Example
<select name="categories" id="news_cat">
<option value="0">Volvo</option>
<option value="1">Mercedes</option>
<option value="2">BMW</option>
<option value="3">Volga</option>
<option value="4">Lada</option>
<option value="5">Porsche</option>
</select>
When I open the page I see the first option Volvo,but I what to be for example BMW. If you are going to say to change their place, this is not the idea because I gave you a simple example. In my case the idea is other
I also forget to say that "selected" can't help because I read all of the values from database
<select name="categories" id="news_cat" selected="1">
<option value="0"></option>
{foreach from=$categories item=i}
<option value="{$i.id}"> {$i.name|stripslashes} </option>
{/foreach}
</select>
You need to apply selected or selected="selected" to your chosen element.
so with your example:
<select name="categories" id="news_cat">
<option value="0">Volvo</option>
<option value="1">Mercedes</option>
<option value="2">BMW</option>
<option value="3">Volga</option>
<option value="4" selected>Lada</option>
<option value="5">Porsche</option>
</select>
Add selected or selected='selected' to option
<select name="categories" id="news_cat">
<option value="0">Volvo</option>
<option value="1">Mercedes</option>
<option value="2">BMW</option>
<option value="3" selected>Volga</option>
<option value="4">Lada</option>
<option value="5">Porsche</option>
</select>
JavaScript solution: selectObj.options[2].selected=true;
http://jsfiddle.net/8dWzB/16/
No sure what server side technology you are using , but regardles of that, you can do what you like on the client side using JQuery. Try the following:-
1) Get the data from your database into a list of objects having the id and name of the each car. Something like the following:-
`var categorylist = [{"id":"1","name":"volvo"},{"id":"2","name":"Mercerdes"},{"id":"3","name":"BMW"},{"id":"4","name":"Kia"},{"id":"5","name":"Toyota"},{"id":"6","name":"Honda"},{"id":"7","name":"Seat"},{"id":"8","name":"Nissan"}];'
You can then get this list to the client-side using ajax post or get
2) Then you can iterate through the object like this
$.each(categorylist, function (index, car) {
if(car.id !='5') {
$("#news_cat").append('<option value="' + car.id + '">' + car.name + '</option>');
}else
{
$("#news_cat").append('<option selected=selected value="' + car.id + '">' + car.name + '</option>');
}
});
Have a look at this fiddle