I have made a dropdown in my site and added background image to it. I can see it fine in Firefox, but not able to see it using Chrome or IE.
Here is:
my site
On the very top you can see a search icon. Upon hovering that you can see a pop out. Inside that I am using a dropdown.
You can see the images showing fine in Firefox but not using any other browser.
:
Here is the select dropdown code I used:
My JS
function goToNewPage(dropdownlist){
var url = dropdownlist.options[dropdownlist.selectedIndex].value;
if (url != ""){
window.open(url);
}
}
My HTML
<form name="dropdown">
<label>I am Looking for</label>
<img src="http://test.techkalph.com/wp-content/uploads/2015/10/Bee-searching1.png">
<select accesskey="E" name="list">
<option selected="">Please select one</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/flowers271.png); background-repeat:no-repeat;" value="http://www.google.com/">Japanese Companies</option>
<option style="background-image:url(http://test.techkalph.com/wp-content/uploads/2015/10/social16.png); background-repeat:no-repeat;" value="http://www.google.com/">Service Provider (Non-Japanese)</option>
</select>
<input type="button" onclick="goToNewPage(document.dropdown.list)" value="Go">
</form>
You can't do it in webkit (Google) browsers. You will need an alternative solution with ul and li elements.
http://getbootstrap.com/components/#dropdowns
Sorry Got your Problem. The code you are using only works with Firefox and Webkit browsers. You either have to use JQuery UI for yuor need, or you can also some code at this link
Related
I have an input associated with a datalist and I want to use a button to write in the input, but I can't reproduce the event which open the list.
The datalist is filtered but I have to click on the input to open the list...
click() and focus() don't work, any ideas?
Look at the snippet, when I click on the button 'A', the datalist doesn't open.
function myFunction() {
document.getElementById('ice-cream-flavors').click();
document.getElementById('ice-cream-choice').value += 'A';
}
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
<button onclick='myFunction()'>A</button>
Datalist is not supported by all browsers and it is not handled the same way. I recommend you switch to something such as flexselect: https://rmm5t.github.io/jquery-flexselect/
This might not give you the answer you wanted, but there's no solution that will work for datalist (on all browsers). You can hack your way around and make it work on Chrome or Firefox, but even that will be hard to do because Google and Mozilla have completely restricted the usage of untrusted events/triggers . Read about this here: https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232
Also initMouseEvent is deprecated, so are all other low-level methods that would have allowed you to create this behaviour in the past
I gave this answer to another similar question just a few moments ago: How to show datalist with javascript?
I'm using jQuery v1.10.2. I need to change the value of a select drop down. I'm using the same js file for both mobile and desktop view (both have different html files). These are the two approaches I've tried to change the value of drop-down:
$('#cType').val('visa');
$("#cType").prop("selectedIndex", 1);
it works fine for the desktop and changes the value, but for mobile it doesn't work. For mobile as well as desktop this is the HTML code I'm using:
<div class="cTypeContainer">
<label for="cType"><span class="red">*</span>Card Type</label>
<select name="cType" class="ui-nodisc-icon ui-alt-icon" id="cType">
<option>Select</option>
<option value="visa">Visa</option>
<option value="master">Master Card</option>
<option value="discover">Discover</option>
<option value="amExpress">American Express</option>
</select>
</div>
I don't know why it isn't working for mobile. I'm using jQuery mobile, do you think it could possibly intefering with its working?
I changed the JS code to this and it worked like a charm:
$('#cType').val('visa').selectmenu('refresh');
All it does is basically refreshes the styling to show the dynamically selected value.
On the selecting a value from a drop down list, I wan't another hidden element to show up.
I'm using the following code:
$('#ddd').change(function() {
$("#divoption237").show(300);
});
<div id="option236" class="option">
<select id="ddd" value="236" name="option[236]">
<option value=""> --- Selecteer --- </option>
<option data-id="49" value="40">Hond</option>
<option data-id="50" value="41">Kat</option>
</select>
</div>
This all works fine in firefox, chrome and IE on my desktop. However I've run into some weird problem on my android phone in chrome. Whenever I select a value, for example Hond, it won't show up as being picked. So the user will still see -- Selecteer -- on his/her screen. The value is selected however and will be send if the form is sent. If I change show(300) to show(), the value is shown to the user. I'd like to use the animation though. Does anyone have a solution to this problem?
here's my code below. On page load, all multiselect are disabled but once the user click the enable button, all multiselect should be enable. Here's my code below. I'm not able to make this work, I wonder why. But if I add "$('#multidiv option').prop('disabled', false);" on first load, it works, but all my multiselect will be enabled on first load. I want to disabled all on first load but enable all by clicking a button. Thanks.
<div id="multidiv">
<label style="float:left; margin-right:-2px;">Target Android Device</label>
<div class="span5" style="display:inline-block; float:left;">
<select id="android" disabled="disabled" multiple="multiple" name="android[]">
<option value="Nexus">Nexus</option>
<option value="HTC">HTC One</option>
<option value="Sony">Sony Xperia</option>
</select>
</div>
</div>
My javascript code below:
$('#enable_button').on("click",function(){
$('#multidiv option').prop('disabled', false);
});
$('#android').multiSelect(); //using "http://loudev.com/" plugin
I've found the solution to my problem.
This $('#multidiv option').removeAttr('disabled'); code actually works. It's the plugin problem.
By adding $('#android').multiSelect('refresh'); it works fine now. The plugin needs to be refreshed after this code $('#multidiv option').removeAttr('disabled');
Thanks for all for trying to help btw.
Why not use the id of the <select> itself:
$('#enable_button').on("click",function(){
$('#android option').removeAttr('disabled');
});
you can use this script;
$('#android').multiselect('disable');
and
$("#android").multiselect('enable');
its work for agungpanduan.com
My code works perfect in firefox and gives error in IE. any ideas?
I have a dropdown with various options, I am trying to show/hide options in another dropdown based on the selected value.
function selectNames() {
var Name = $("#SelectName").attr("value");
$("."+Name).each(function() {
$(this).hide();
});
}
<select >
<option class="Name1" value="SomeName1" </option>
<option class="Name2" value="SomeName2" </option>
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
<option value="Name1" </option>
<option value="Name2" </option>
</select>
Any help is appreciated..
Make sure you close the start tag. Try to use this:
<select>
<option class="Name1" value="SomeName1" />
<option class="Name2" value="SomeName2" />
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
<option value="Name1" />
<option value="Name2" />
</select>
Seems to work for me in IE8.
It won't work in IE & Chrome
check out in IE or Chrome
The best alternative that you can do is to remove the option rather than hiding it.(you should keep a copy of the original options before removing it.)
var copy = $("."+Name).clone();
function selectNames() {
$("#thefirstselect option").remove();
copy.appendTo("#thefirstselect");
var Name = $("#SelectName").val();
$("."+Name).each(function() {
$(this).remove();
});
}
Your markup is not correct. You are each option open tag isn't properly closed.
Also, the specs do not specify CSS changes to individual option tags, though it does work on Firefox.
In simpler words, you cannot hide individual inputs - in which case, you'll have to remove them.
If this is a direct copy and paste then you need to close the select options to look like this:
<option value="Name1">Name1</option>
<option value="Name2">Name2</option>
I would suggest having two selects that you show and hide. Show and hide of options sounds risky.
Also, make sure you set the hidden select to attr('disabled','disabled')/disabled="disabled" and then when you unhide it undo that with removeAttr('disabled'). This is to prevent the hidden select from posting data to the server when you have multiple selects with the same name="...".
If you must use a single select, you may want to appendTo/remove the options, but that is up to you. If show/hide works in all browsers, go for it.
Sadly, you just can't.
IE don't support hide of individual options in a select, neither Chrome or Opera.
This feature isn't cross browser.
What you can do is remove the option and add it again later...