I am using JavaScript image combobox v3.3 and i made my select dropdown list with images that looks like this
How can I make this to show all 10 options without showing a scrollbar?
I'm using the following HTML:
<input type='number' step='0.01' name='odd'/>
<select name='bookmaker' id='bookmaker'>
<option value='bet365' title='icons/bet365.png'></option>
<option value='betathome' title='icons/betathome.png'></option>
<option value='10bet' title='icons/10bet.png'></option>
<option value='whill' title='icons/whill.png'></option>
<option value='bwin' title='icons/bwin.png'></option>
<option value='pinnacle' title='icons/pinnacle.png'></option>
<option value='marathon' title='icons/marathon.png'></option>
<option value='sportingbet' title='icons/sportingbet.png'></option>
<option value='unibet' title='icons/unibet.png'></option>
<option value='tipico' title='icons/tipico.png'></option>
</select>
And this is the jQuery code:
<script>
$(document).ready(function() {
console.log('jQuery is now ready to be executed!');
$('#bookmaker').msDropDown();
});
</script>
try this code after populate droap down
$('.ddChild ddchild_ border shadow').removeAttr("height");
Related
I would like to know how you could add a help symbol beside a disabled option in a dropdown in html, if possible. I would like it so that when you click on the symbol it then tells you why that option has been disabled. Something similar to the dropdown below.
This is the basic code I have for the dropdown right now.
<select name="description" rows="4" class="form-control">
<option value="RhinoTab"><?php echo _l('estimate_table_option1_1'); ?></option>
<option value="RTi"><?php echo _l('estimate_table_option1_2'); ?></option>
<option value="Magical Shit" disabled>Magical Shit</option>
</select>
I ended up finding an example I was able to use as a work around to get my project working. Instead of having an icon it is when you click on the "disabled" option but it will do something close enough to what I was looking for.
$(function(){
var options_sel_idx = 0;
$("#options").on("change", this, function(event) {
if($(this.options[this.selectedIndex]).hasClass("disabled")) {
alert("a");
this.selectedIndex = options_sel_idx;
} else {
options_sel_idx = this.selectedIndex;
}
});
});
<style type="text/css">
.disabled {color:#808080;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" class="disabled">Options 2</option>
<option value="0" class="disabled">Options 3</option>
<option value="0" class="disabled">Options 4</option>
</select>
I want a form to have multiple drop down selects that change based on the previous selection. This is how I want it to work.
<select id="format">
<option selected="selected" value="NULL">-- Select a product Format --</option>
<option value="PS3">PS3</option>
<option value="Xbox 360">Xbox 360</option>
<option value="Wii U">Wii U</option>
</select>
So if you select PS3 you are then faced with more options for PS3 product type
<select id="ps3-product-type">
<option selected="selected" value="NULL">-- Select a product PS3 product type --</option>
<option value="chargers">chargers</option>
<option value="controllers">controllers</option>
<option value="headsets">headsets</option>
</select>
So then you select headsets for example and you get another set of final options of products
<select id="ps3-headsets">
<option selected="selected" value="NULL">-- Select a PS3 headset --</option>
<option value="product-1">product 1</option>
<option value="product 2">product 2</option>
<option value="product 3">product 3</option>
</select>
How can I do this with jquery or PHP? Please bare in mind that I will also have selects for Xbox 360 and Wii U too.
UPDATE PROGRESS:
http://jsfiddle.net/maximus83/r7MN9/639/
Here is my HTML, I have got the first set of arrays working for selecting product type, But I cant get the 3rd box working, I need 3rd box to say the product, where do I go from here.
<select id="cat">
<option val="PS3">PS3</option>
<option val="Xbox360">Xbox360</option>
<option val="WiiU">WiiU</option>
<option val="Multiformat">Multiformat</option>
</select>
<select id="item">
</select>
<select id="product">
</select>
Here is my script
PS3=new Array('Headsets(PS3)','Controllers(PS3)','Chargers(PS3)','Cables(PS3)');
Xbox360=new Array('Headsets(360)','Chargers(360)');
WiiU=new Array('Controllers(WiiU)','Headsets(WiiU)');
Multiformat=new Array('Headsets(Multi)','Chairs(Multi)','Cables(Multi)');
populateSelect();
$(function() {
$('#cat').change(function(){
populateSelect();
});
});
function populateSelect(){
cat=$('#cat').val();
$('#item').html('');
eval(cat).forEach(function(t) {
$('#item').append('<option val="#item">'+t+'</option>');
});
}
This should do the trick for you. It's a previously answered thread on the exact same topic - how to populate a drop down based on the value in another. It takes advantage jQuery (And I've used it before myself as reference).
This question already has answers here:
Using Ajax, jQuery and PHP in two dropdown lists
(2 answers)
Closed 8 years ago.
I was making a dropdown switch. I mean when I choose an option of the first drop down the second will show specified message preset's in stead of the first.
**Dropdown one**
<select name="bantype">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select></br></br>
**Dropdown two**
<select name="reason">
<option value="Sexual harassment">Sexual harassment</option>
</select>
How can I make that when I select an option from the first dropdown that the option values of the second will switch?
Thank you for help
It's called hierselect, chained or related selects.
I like this jquery plugin: http://www.appelsiini.net/projects/chained
So you have predefined values for each dropdown value from first list
<select id="first">
<option value='ban' data-show="#optionsOne">Ban Ban</option>
<option value='banAll' data-show="#optionsTwo">Ban All</option>
</select>
And you have other (hidden) dropdown for each of your options:
<select id="optionsOne" class='drop'>...</select>
<select id="optionsTwo" class='drop'>...</select>
When #first changes values, show relative dropdown:
$('#first').change(function(){
$('.drop').hide(); // hide all dropdowns
id = $('option:selected', this).data('show'); // take relevant id
$(id).show(); // show that dropdown with above id
});
Call javascript function event onchange,
<select name="bantype" onchange="getoptions(this.value);">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select><br/><br/>
<select name="reason" id="reason"></select>
In your function, use following
getoptions(val) {
if(val == 'user') {
var your_options = '<option value="abc">Abc</option>';
jQuery('#reason').html(your_options);
jQuery('#reason').show(); // if second dropdown is hidden
}
}
If you have a fixed option on page load, then here is one way to achieve what you want.
Give a relation between first select and the second one, like this:
<select name="bantype">
<option value="user">User ban</option>
<option value="ip">IP ban</option>
<option value="system">System ban</option>
</select></br></br>
**Dropdown two**
<select name="reason">
<option class="user" value="a">a</option>
<option class="user" value="d">d</option>
<option class="ip" value="b">b</option>
<option class="system" value="c">c</option>
</select>
Use jQuery to show and hide the option, like this
$("select[name='reason'] option").each(function(){
$(this).hide();
});
$("select[name='bantype']").on("change", function(){
var selected = $(this).val();
$("select[name='reason'] option").each(function(){
if($(this).prop("class") != selected){
$(this).hide();
}else{
$(this).show();
}
});
});
Check out this DEMO..
I have drop down boxes related to each other. The second dropdown values are filtered according to first dropdown box value.
Now I want to clone elements in div with class="old_div" into div with class="new_div" and add events to each new elements in div with class="new_div".
ADD
<div class="old_div" >
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM</option>
</select>
<br />
</div>
<div class="new_div">
</div>
I am able to clone elements to new div using Jquery
Jquery code:
$("#add_a").on('click',function(){
var data = $('.old_div').html();
$('.new_div').append(data);
});
$("#select1").on('change', function() {
if($(this).data('options') == undefined){
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val().trim();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
But how can i make new elements to be related to each other.
I have created fiddle http://jsfiddle.net/6YEQx/ for reference.
You are using id with select box and making duplicates of it, this is causing problem to identify select box using id in jQuery. So use class instead of id.
HTML :
<select name="select1" class="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" class="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM</option>
</select>
Also you are adding elements dynamically so need to bind change event using $(document) and on.
EDIT: also added new line in add_a button script to show all options in second select box initially.
jQuery :
$("#add_a").on('click',function(){
var data = $('.old_div').html();
$('.new_div').append(data);
// to show all options initially and remove any preselected option
$('.new_div').find('.select2:last option').show().removeAttr('selected');
});
$(document).on('change',".select1", function() {
var id = $(this).val().trim();
$(this).next('.select2').find('option').hide();
var $options = $(this).next('.select2').find('option[value=' + id + ']');
$options.show();
$options.first().attr('selected',true)
});
Demo
i want to display 2x dropdown menus both will be pre populated (2nd menu "mainToon" will contain over 200 names but for the example i have shown just a few.
<select id="category" name="Category">
<option value=" "></option>
<option value=" ">-----------------</option>
<option value="Main Toon">Main Toon</option>
<option value="Alt Toon">Alt Toon</option>
<option value="Cyno Toon">Cyno Toon</option>
<option value="Super Toon">Super Toon</option>
<option value="Dust Toon">Dust Toon</option>
</select>
<select id="mainToon" name="mainToon">
<option value=" "></option>
<option value=" ">-----------------</option>
<option value="Agmar">Agmar</option>
<option value="S Tein">S Tein</option>
<option value="Karades">Karades</option>
<option value="Bad Kharma">Bad Kharma</option>
<option value="Ed jeni">Ed Jeni</option>
</select>
by default the first dropdown will show blank and i want the "mainToon" dropdown to be hidden untill any of the following are selected:
"Alt Toon",
"Cyno Toon",
"Super Toon",
"Dust Toon"
Then the form will be visable.
Can i do this by applying a .hidden css code to the dropdown and changing the class dynamically when other options are selected?
many thanks for the help.
First hide your dropdown :-
<select id="mainToon" name="mainToon" style="display:none;">
</select>
And use Jquery show hide function like this :-
$(document).ready(function(){
$("#category").change(function(){
var value = $(this).val();
if(value=="Alt Toon" || value=="Cyno Toon")
{
$("#mainToon").show();
}
else
{
$("#mainToon").hide();
}
});
});
Below show the DEMO how to show DIV based on selection value ,
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
And Here is working demo.