So I am trying to use XMLHTTPRequest to get some information from another page. It will have several <option>s, a variable number of them.
My thoughts were that I could get all of these options, outputted as text, and insert them wholesale into the select menu. Would this be possible? An example of what I want to do:
<select name="culture[]" onSubmit="formValidation()" multiple="multiple" id="cultpicklist"></select>
is the select menu, and then I would do something like this (pseudo-code)
txtobjfromXMLHTTPRequest would be this:
<option value="41" name="culture[]">testculthy</option>
<option value="47" name="culture[]">ereeevvv</option>
<option value="49" name="culture[]">yep</option>
<option value="50" name="culture[]">addanother</option>
txtObj = txtobjfromXMLHTTPRequest //to shorten what I have to write/what you have to read
document.getElementById("cultpicklist").value(txtObj)
Would this work? Am I on the right path? How should I change this?
You should try using .innerHTML:
document.getElementById("cultpicklist").innerHTML = txtObj;
You should however thoroughly test this in all the browsers you support, as there are some cross browser issues with this.
...and here's the fiddle: http://jsfiddle.net/5PGF6/
Related
I would like to have a text-input field that also has an optional drop-down. The ideal ui would look like a text input on default and accept text but when you click an arrow, a drop-down will show. It would also be nice to have the drop-down be implemented with select2 to allow easy searching of values (and that's what I've tried already).
My first attempt used the tagging feature in select2 but it's not exactly what I want as the user will type and then have to select their new input. The default is also not a text-input in this case. Thanks for any help. Also the options can't be hard-coded as we're polling a db for the items that the list would show.
updates:
An example would be something similar to this: jqueryui.com/datepicker/#icon-trigger... where the default is an input text field and we have a button to select the date, but in this case, it's a button which would overlay a drop-down on the text-field.
I also looked at datalist and that would work but I don't think you can not hard-code the options.
Something like this: http://jqueryui.com/autocomplete/#combobox .. would be perfect. But changes would be that it has to accept any entered option rather than reject it and also grab from a list instead. I'm not too familiar with front-end stuff, so if this is possible to do, can you let me know how and the basic idea? I don't think the list can be populated with something like a http get request?
try using datalist html tag:
<form action="/action_page.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
I have two reports: Checklist and Location. Depending on which report is chosen decides the action of the form of what path to take. I also have a select that ask the user whether or not they want to print automatically, preview as a pdf, or open in excel.
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
I am curious of how I am suppose to forward this information in order to do the queries and process the choice the user is requesting. I am sure people do things like this all the time. Would anyone like to share any examples or advice - stepping stones to get me on the right path? Thanks in advance!
Tagged below are all the languages I am using that I could use to achieve this goal.
If you are just trying to send data to a different page, then you can use query parameters for that. One option is to build the query parameters as users update the dropdown:
var select = $('select[name=Format]');
function buildUrl(option) {
return 'some/endpoint?option=' + option;
}
select.change(function() {
var value = $(this).val();
var url = buildUrl(value);
console.log('URL to call:', url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
and then you can use JavaScript or CF to detect the presence (or absence) of the query parameters to meet your app's requirements.
Hope this helps.
I have tried using pdfmake on my reports. It has the option to generate a report with Excel, Print, or download pdf. All you have to do is pass a json array. You can read the documentation on github. Here's the link: PDFMake
This might not be the best answer but it would be a stepping stone for you.
How do I highlight the option based on the page the user is currently on?
E.g. If on Beds page, Beds option is selected.
This is inside of a wordpress sidebar text widget so it is not coded separately on each page. I guess maybe javascript would be needed to detect what page it's on?
<form>
<select onChange="location=this.options[this.selectedIndex].value;">
<option value="#">Select a Category</option>
<option value="https://www.furnishare.it/shop/">Shop All</option>
<option value="/product-category/beds/">Beds</option>
<option value="/product-category/chairs/">Chairs</option>
<option value="/product-category/decor/">Decor</option>
<option value="/product-category/dressers/">Dressers</option>
<option value="/product-category/sofas/">Sofas</option>
<option value="/product-category/storage/">Storage</option>
<option value="/product-category/tables/">Tables</option>
</select>
</form>
Thank you!
You would want to get the url pathname:
window.location.pathname
I would suggest that you do this in a JS file rather than inline HTML. The implementation (jsfiddle wasn't saving for some reason):
http://codepen.io/anon/pen/VvEeMY
Make sure to un-comment the commented location line to get it working on your webpage:
var location = window.location.pathname;
Note that I would highly recommend not dealing with DOM events using attributes like onClick ... but to answer your question I've written the pure JS code above.
Edit: Using location.pathname requires you to use full paths starting after your domain but since your implementation was already doing so in select > option values I've taken the liberty to simplify it with location.pathname.
Edit:
Thanks everybody, but nothing seems to work. I am inserting this code in a file that I know is being used and that contains other javascript blocks normally formatted, and this still doesn't work. It works in a fiddle, but not on my code. I guess this is too specific to the platform and extension that I'm trying to modify (this is part of a Magento checkout step modified by a third party extension). I will start looking into replacing the list with a manually generated one. Thanks again.
I am trying to hide an option in a dropdown list that is dinamically generated. The CSS solution doesn't work on all browsers, and even though I have found several similar questions here, neither one offers a solution that works for me.
Here's what my list renders like:
<select id="timeselect" name="adj[delivery_time][]" title="El plazo de la entrega" class="adjtimeselect select" type="time" ><option id="option-10" value="10" >10</option>
<option id="option-11" value="11" >11</option>
<option id="option-12" value="12" >12</option>
<option id="option-13" value="13" >13</option>
<option id="option-14" value="14" >14</option>
<option id="option-15" value="15" >15</option>
<option id="option-16" value="16" >16</option>
<option id="option-17" value="17" >17</option>
<option id="option-18" value="18" >18</option>
<option id="option-19" value="19" >19</option>
<option id="option-20" value="20" >20</option>
</select>
I need to hide the option with value "12" for example.
I am using this JS:
$("#timeselect option[value='12']").remove();
Any advice would be greatly appreciated since I'm new to JS.
Thanks.
Use the hide() function of JQuery: jsFiddle
You can use show() to get it back
Jquery remove by value
$("#timeselect option[value=11]").remove();
Jquery remove by Text
$("#timeselect option:contains(11)").remove();
Jquery to hide a select box option with its value using css
$("#timeselect option[value='11']").hide();
or
$("#timeselect option[value='11']").css('display','none');
I tried in many different ways but this solution seems reasonable and cross browser compatible and I have used in my code. No plugins required simple register function with jquery object
Solution at glance:
(function ($) {
$('#showOne').click(function () {
$('#ddlNumbers').showHideDropdownOptions('3', true);
});
$('#hideOne').click(function () {
$('#ddlNumbers').showHideDropdownOptions('3', false);
});
$.fn.showHideDropdownOptions = function(value, canShowOption) {
$(this).find('option[value="' + value + '"]').map(function () {
return $(this).parent('span').length === 0 ? this : null;
}).wrap('<span>').hide();
if (canShowOption)
$(this).find('option[value="' + value + '"]').unwrap().show();
else
$(this).find('option[value="' + value + '"]').hide();
}
})(jQuery);
Here is the complete implementation http://jsfiddle.net/8uxD7/3/
You can use jQuery remove() function. if you want to remove it permanently from DOM, or if you want to remove and reinsert it use detach()
$("#timeselect option[value='12']").remove();
Or Detach
var value = $("#timeselect option[value='12']").detach();
And reinsert it by using
$("#timeselect").append(value);
http://jsbin.com/iHIrAQE/5/edit
See the example
Another way is you can disable the value so user can see but cannot select
$("#timeselect option[value='12']").attr('disabled','disabled');
I would like this dropdown select to show an image with an alt text in front of the options, how can I do this?
<form>
<select onchange="window.open(this.options[this.selectedIndex].value,'_blank')">
<option value="#">Select one</option>
<option value="#"></option>
<option value="http://www.url1.com">www.url1.com</option>
<option value="http://www.url2.com">www.url2.com</option>
<option value="www.url3.com">www.url3.com</option>
</select>
</form>
Thanks a lot!
It is not possible to show images in an html <select> - you would have to use a custom solution like this one: http://ivaynberg.github.io/select2/
That is not a button!, it a select dropdown.
You should use ddSlick which is a free light weight jQuery plugin that allows you to create a custom drop down with images and description.
I hope this helps
DOM model doesn't allow img elements inside option elements, so you cannot put image into a select. Please have a look at an HTML language reference. But you can use JavaScript or jQuery to put an image at the left or right of the menu whenever a new option is selected.
However, in Firefox you can just add background image to option:
<select>
<option style="background-image:url(image1.png);">OPTION1</option>
<option style="background-image:url(image2.png);">OPTION2</option>
<option style="background-image:url(image3.png);">OPTION3</option>
</select>
And in other browsers the only way of doing that would be using some JS widget library, like for example jQuery UI Selectable.
olsn's link is also a good example.