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;
}
Related
[HTML, JS, CSS]
.
I'm trying to make code for a dining calculator that takes an inputted value, inputted tip amount (from a drop-down menu), and an inputted amount of customers (also from a drop-down menu), then calculates ([startPrice * tipAmount] + [startPrice/peopleEating]) and prints the results.
The problem is that I don't know how to calculate and print results using the inputted values of those drop-down menus. Can anyone give me a simple explanation?
Thanks.
You simply need to use the .value of the dropdown. I have attached a runnable code snippet below:
function processForm() {
var startPrice = document.getElementById("startPrice").value;
var tipAmount = document.getElementById("tipAmount").value;
var peopleEating = document.getElementById("peopleEating").value;
console.log("Start price is " + startPrice);
console.log("Tip Amount is " + tipAmount);
console.log("People Eating is " + peopleEating);
console.log((startPrice * Number(tipAmount)) + (startPrice/Number(peopleEating)) + " Is the calculated number");
}
<!DOCTYPE html>
<html>
<body>
<label for="startPrice">Start Price</label>
<input type="number" name="startPrice" id="startPrice"><br><br>
<label for="tipAmount">Tip Amount</label>
<select id="tipAmount" name="tipAmount">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select><br><br>
<label for="peopleEating">People Eating</label>
<select id="peopleEating" name="peopleEating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button onclick="processForm()">Calculate</button>
</body>
</html>
PS: I have used the Number() function in the dropdown values, because by default they are stored as strings, and converting them into numbers is important.
I'm trying to redirect my page when selecting an Option on a Select using Thymeleaf. My code is written as follows:
<select>
<option th:each="size : ${pageSizes}" th:text=${size} th:onclick="'window.location.href = \'' + #{/ingredient(size=${size})} + '\''"></option>
</select>
And, after inspecting it on Google Chrome, the HTML created is:
<select>
<option onclick="window.location.href = '/ingredient?size=5'">5</option>
<option onclick="window.location.href = '/ingredient?size=10'">10</option>
<option onclick="window.location.href = '/ingredient?size=20'">20</option>
<option onclick="window.location.href = '/ingredient?size=25'">25</option>
<option onclick="window.location.href = '/ingredient?size=50'">50</option>
</select>
But nothing happens when a select a new Option. What am I doing wrong?
Use onchange event on select tag instead of onclick.
<select th:onchange="'window.location.href = \'' + #{/ingredient} + '?size=\' + this.value ' ">
<option th:each="size : ${pageSizes}" th:text=${size} ></option>
</select>
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>
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
I was just wondering if there was a simple shortcut to add options to a dropdown menu for the numbers 1 to 100 instead of having to do the following:
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
etc. all the way to 100?
Thanks
Not with plain HTML I'm afraid.
You could use some jQuery to do this though:
$(function(){
var $select = $(".1-100");
for (i=1;i<=100;i++){
$select.append($('<option></option>').val(i).html(i))
}
});​
-- SEE DEMO --
You can download jQuery here
Not with pure HTML as far as I know.
But with JS or PHP or another scripting language such as JSP, you can do it very easily with a for loop.
Example in PHP:
<select>
<?php
for ($i=1; $i<=100; $i++)
{
?>
<option value="<?php echo $i;?>"><?php echo $i;?></option>
<?php
}
?>
</select>
Are you using JavaScript or jQuery besides the html? If you are, you can do something like:
HTML:
<select id='some_selector'></select>​
jQuery:
var select = '';
for (i=1;i<=100;i++){
select += '<option val=' + i + '>' + i + '</option>';
}
$('#some_selector').html(select);
As you can see here.
Another option for compatible browsers instead of select, you can use is HTML5's input type=number:
<input type="number" min="1" max="100" value="1">
In Html5, you can now use
<form>
<input type="number" min="1" max="100">
</form>
I see this is old but...
I dont know if you are looking for code to generate the numbers/options every time its loaded or not. But I use an excel or open office calc page and place use the auto numbering all the time. It may look like this...
| <option> | 1 | </option> |
Then I highlight the cells in the row and drag them down until there are 100 or the number that I need. I now have code snippets that I just refer back to.
Jquery One-liners:
ES6 + jQuery:
$('#select').append([...Array(100).keys()].map((i,j) => `< option >${i}</option >`))
Lodash + jQuery:
$('#select').append(_.range(100).map(function(i,j){ return $('<option>',{text:i})}))
As everyone else has said, there isn't one in html; however, you could use PUG/Jade. In fact I do this often.
It would look something like this:
select
- var i = 1
while i <= 100
option=i++
This would produce:
Just Type in an online Compiler C++ and copy and Paste it.
#include <iostream>
int main() {
// Write C++ code here
for(int i=18;i<=60;i++)
{
std::cout<<"<option value="<<i<<">"<<i<<"</option>";
}
return 0;
}