Since there is no paper-select element, is there a way of using iron-dropdown to apply material design to the below Select Type Extension Element?
<dom-module id="my-products">
<template>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</template>
<script>
Polymer({
is: 'my-products',
extends: 'select'
});
</script>
</dom-module>
This is demonstrated in the newly released paper-dropdown-element on Github:
https://github.com/PolymerElements/paper-dropdown-menu
Related
Is it possible to get a multiple select box to behave like a select box in the following way: Only show selection box (1 row) and expand when clicked?
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
but I only want to see the empty 1 row select box until clicked and then have it expand as a dropdown with scroll bar if needed
I hope CSS is enough to solve your problem. Try something like this.
select{height:20px}
select:focus{height:auto}
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This accomplishes what you are looking for at a very basic level using jQuery. All options are initially hidden with CSS except the first option. Using jQuery, once the first option is clicked, then the remaining options will display.
Working Example: https://jsfiddle.net/byronj/fmvufoxz/4/
**HTML:**
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
**CSS:**
select option {
display: none;
}
select option:first-of-type, .show {
display: block;
}
**jQuery:**
jQuery(document).ready(function ($) {
$('option').on( "click", function() {
$('option').show();
});
});
I believe what you are trying to do can be accomplished by:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Try running the above snippet and see if that's what you were looking for.
Hope that helped!
Open this link in IE to exactly understand the behavior that I will be describing and seek a hack for.
I have the following select list:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
When I render this in IE, drop-down behavior of this changes compared to other browsers due to which some of the options are pushed above the selectbox while the others are pushed below (based on the selected option)
Since this is the default behavior of IE, what I am looking for is that the options should get re-ordered i.e. the option that a user selects should be made the first option. Check the image below:
Does anyone have a work-around for this ?
Also if anyone knows a hack to alter this default IE behavior, it would be great to know and learn that
Is this the right way ?
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
var choose = $("#choose").bind('change',function(){alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Here is a method that works in Jquery:
HTML
<select id = "choose">
<option value="null" name="volvo">Volvo</option>
<option value="1" name="saab">Saab</option>
<option value="2" name="mercedes">Mercedes</option>
<option value="3" name="audi">Audi</option>
</select>
jQuery
var choose = $("#choose").bind('change',function(){
choose.find('option:selected').prependTo(choose);
});
(Source)
FULL CODE
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var choose = $("#choose").bind('change', function() {
alert("hello");
choose.find('option:selected').prependTo(choose);
});
});
</script>
<head>
<body>
<select id="choose">
<option value="choose">choose</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
<html>
<head>
<script src="jquery-3.1.0.js"></script>
<script>
$(function () {
var selectedItem = $("#selectItem").bind('change', function () {
selectedItem.find('option:selected').prependTo(selectedItem);
});
});
</script>
<head>
<body>
<select id="selectItem">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</body>
</html>
Thanks... :)
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/
Hello is there anyway to have a value selected by giving in a value?
<select name="color">
<option value="black">black</option>
<option value="white">white</option>
<option value="red">red</option>
</select>
For example if I want black to be selected I would set selected = black.
Rather than using <option value="black selected>black</option>
Thank you for assistance, please let me know if there is any misunderstanding.
If you are not averse to using js and jquery:
<select name="color" id="color">
<option value="black">black</option>
<option value="white">white</option>
<option value="red">red</option>
</select>
<script type="text/javascript">
$(document).ready(function () {
$("#color").val("black");
});
</script>
If you want to work with multiple select options, you can use this:
$("#color").val(["black"]);
// for single select option
$("#color").val(["black","red","white"]);
// for multiple select options
i see there is a disabled property on a specific item in the dropdown list but is there an enabled property on the whole html dropdown itself?
any suggestions?
According to the HTML 4 spec a select element has a disabled attribute.
So
<select disabled>
<option>Something</option>
</select>
should work
disabled="disabled"
This will disable a value within the combo box (it will still show up, but it will not have the ability to be selected):
<select>
<option disabled="disabled" value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This will disable the whole combo box:
<select disabled="disabled">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
may this will help
is same as :
<html>
<head>
<script type="text/javascript">
function makeDisable(){
var x=document.getElementById("mySelect")
x.disabled=true
}
function makeEnable(){
var x=document.getElementById("mySelect")
x.disabled=false
}</script></head><body><form>
<select id="mySelect"><option>Apple</option><option>Banana</option>
<option>Orange</option>
</select>
<input type="button" onclick="makeDisable()" value="Disable list">
<input type="button" onclick="makeEnable()" value="Enable list">
</form>
</body>
</html>