I have a select list like such:
<select name="taxonomy[1][]" multiple="multiple" class="form-select" id="edit-taxonomy-1" size="7">
<option value="13">Glaciers</option>
<option value="14">Lake Ice</option>
<option value="17">Permafrost</option>
<option value="16">River Ice</option>
<option value="15">Sea Ice</option>
<option value="12">Snow</option>
</select>
This list is being dynamically created and I'm not sure how to change the output display. I have seen tutorials like this: http://www.netvivs.com/convert-regular-select-into-a-drop-down-checkbox-list-using-jquery/ which convert a select into a dropdown check list. Is there a way using php,javascript,jquery, to convert the select to display as a checklist? Preferably in table form so I get 2 rows with 3 columns?
You could do it in a custom way like so:
$('#edit-taxonomy-1').parent().append('<table id="checkboxes"><tbody><tr></tr></tbody></table>');
$('#edit-taxonomy-1 option').each(function() {
var label = $(this).html();
var value = $(this).attr('value');
$('#checkboxes tbody tr').append('<td><input type="checkbox" value="'+value+'">'+label+'</td>');
});
Or just use the plugin: http://code.google.com/p/dropdown-check-list/
Looks like the example link does it using jquery...
Just make sure you have a source to jquery.js library, as well as a source to the library that site has offered as a download.
Then just call,
$("#edit-taxonomy-1").dropdownchecklist();
I havent tried it, but thats what the tutorial says to do...
Good luck.
PS - I had a hard time trying to find the download of the actual library from that site, so here it is. http://code.google.com/p/dropdown-check-list/
Related
Is that possible to get option text instead of value?
Somehow I need to use same option for 2 purpose. one of them need to get value which will be id of selected option and for another purpose i need to get text of that option.
here is how it looks like in HTML:
<select class="form-control" name="address_id">
<option value="1">Street 3.</option>
<option value="2">Street 4.</option>
</select>
I saw solutions base on Jquery and JavaScript but that's not gonna work for me I need PHP solution.
here is my saving method:
// codes....
$order->address = $request->input('address_id'); // basically will save value
//codes...
Auth::user()->orders()->save($order); //saving
Is there a way to mimic the C input/select box where you have a pull down with a blank text-entry at the top? Users would either type a new value or select from the list. Has anyone figured a way to do this with PHP/Javascript? An AJAX type of solution would even be better.
I'm not sure what to call this type of box, I don't think it is a "combo box" like most people think of.
You have a few options.
Here's a quick function I threw together in jQuery that will do what you want. This option required the client have JavaScript enabled to work.
http://jsfiddle.net/QrA4N/25/
If you don't want to make JavaScript a requirement
If you want a solution without JavaScript (client side code). You are stuck with placing an input box with the same "name" as your select box next to it or after it and adding an "Other" option to your select box.
<select name="selAnimals" id="selAnimals">
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="bird">Bird</option>
<option value="guineapig">Guinea Pig</option>
<option value="">Other</option>
</select>
<input type="text" name="selAnimals_Other" id="selAnimals_Other" />
Now your PHP will have to check both $_POST["selAnimals"] and $_POST["selAnimals_Other"] to derive the correct value.
The best option is to combine the HTML above and the JavaScript above that to create a gracefully degrading solution for those with JavaScript enabled or disabled.
http://jsfiddle.net/QrA4N/26/
I added the extra HTML INPUT tags to the jsfiddle from the top of the answer and only changed 1 line of the jQuery function (makeInputSelect).
var $inp = $("#" + id + "_Other");
You can use famous Chosen library for that :)
BTW, see the second example of countries.
Suppose a form.php file, and there is "add" button, once it's clicked, a drop down list will show, to let you choose which type of input type you want. For example:
<select name="Type">
<option value="Text">Text</option>
<option value="MultipleChoice">MultipleChoice</option>
<option value="Checkbox">Checkbox</option>
</select>
My question is, I don't know how to implement the function that, once the type is chosen, suppose checkbox, then a checkbox will shown, and could let you input the label of each checkbox, you can do this one by one.
Also I want to make this process could happen iteratively. I'm not sure if I explain clearly, it's a little bit like the google form function. Any ideas? If providing some codes would be better. Thanks!
Here is plain vanilla old school HTML/JS
<select name="Type" onchange="showformelement(this.value)">
<option value="text">Text</option>
<option value="MultipleChoice">MultipleChoice</option>
<option value="Checkbox">Checkbox</option>
</select>
<script>
function showformelement(whichelement){
//use whichelement to embedd element in DOM
}
</script>
If you can use jQuery or similar toolkit it may be a much simpler job
I know what are you looking for, just let you know that it isn't a simple script, it will have way too many functions and will be little hard to build.
Just to start, if you search on the web for PHP and jQuery based form builders and similar other things, you will find many ready to use scripts. Well, if you don't want to search for one, the principle logic will look like following:
PS: I will explain how to develop using jQuery.
<select id="options">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
<script>
$(document).ready(function(){
$('#options').change(function(){
var optSelected = $('#options option:selected').val()
if(optSelected == 1){
// Shows up and div with Checkboex for edit
}
if(optSelected == 2){
// Shows up and div with Combobox for edit
}
if(optSelected == 3){
// Shows up and div with Textbox for edit
}
})
})
</script>
After doing that, you will need to build the options of each type...
There is too much work... look, I didn't write here your script, I just explained you how to build...
This is a huge system...you will need to know a bit of JavaScript to make one of these...
Even simpler, without needing to do any casing or conditioning, (uses jQuery).
Example: http://jsfiddle.net/SMAfA/
$(function() {
$("#type").change(function() {
type = $("option:selected", this).text();
$("#target").append("<input type="+type+">");
})
})
I have a select list, currently I have it implemented then when the user selects an item, the I have some javscript that creates a li on the fly on the places on the page, the problem is that I want the user the be able to select multiple items from the list, however the javascript cannot cope with this, but I need this functionality so that when I submit the form the values of the selct list go into the post.
Currently my javascript looks like this,
$('#sector').change(function() {
var selected = $(this).val();
//alert(selected);
$('#selected_sectors').prepend('<li>'+selected+'</li>');
});
Is it is possible to get this each time the user ctrl+selects and item is creates the li but and keeps the values accesible in the post?
Possibly something like this is what you're looking for (note the :selected selector).
<select id="items" multiple size="5">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="banana">Banana</option>
<option value="grape">Grape</option>
</select>
<ul id="sel-items"></ul>
$('#items').change(function(e){
$('#sel-items').empty();
$(this).find(':selected').each(function(i,e){
$('#sel-items').append($('<li>').text($(e).val()));
});
});
Working Example
(Working on one now that checks for deltas between the <select> and the <ul>)
This is just me thinkign of jazzing up a mundane input field.
Ok so we have an input element, and we have pre-propagated small db table with id , name and image name
So this is what I am thinking.
We have an input element, where user begins typing. Lets say APPL...
Drop down ( for live auto suggest pops up ) with APPLE , they select APPLE and within another div element elsewhere on the page, a image div displays apple.png
Likewise if they choose banana , similarly banana.png shows in that div .
Ok so what have we got now.
Well I have auto suggest ( live search auto complete done ) all fine and dandy.
I have input element working, and they can select as they type from suggestions.
What I cannot figure out is how, to use ( possibly ajax I suppose ) hmm .. or other method, a way of displaying an image elsewhere, that reflects the choice they made.
To make things easier.
All auto completes are the exact same as the image file name, so:
APPLE becomes apple.png
CAKE becomes cake.php
I am sure js can help here. Just not sure how. I would have thought getElementById
Anyhoo .. sometimes, asking a question may invoke a response from someone who has done something similar.
Cannot show code, as the element I want to create , doesnt exist yet.
But for simplicity sake, lets take a select box method:
<select id="fruit" name="fruit">
<option value="">Please select a Fruit</option>
<option value="apple">Apple</option>
<option value="cake">Cake</option>
</select>
Presently the Auto Suggest , Auto complete looks like this:
<div class="field"><label for="fruit">Pick a Fruit </label>
Any help appreciated...
You can do this easily with jQuery. Copy the code sample below and paste it between the body tags of an html file. Replace the "myselector" element's option values with your own. When you select an item from the drop menu, the image will dynamically change.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("#myselector").change(function() { // Assign a handler.
if ($("#myselector").val() != '') {
$("#myimage").attr('src', $("#myselector").val()); // Change the image.
}
});
});
</script>
<select name="myselector" id="myselector">
<option value="">Select Image</option>
<option value="http://www.gravatar.com/avatar/e2f0c2f013205c397a7b00bc3012a027?s=32&d=identicon&r=PG">Image 1</option>
<option value="http://www.gravatar.com/avatar/06383b51463f855d7cc0f07d4566bd42?s=32&d=identicon&r=PG">Image 2</option>
</select>
<img name="myimage" id="myimage" src="http://www.gravatar.com/avatar/c259fe3371bba238ad95021e67741e9c?s=32&d=identicon&r=PG" />
Add an image on your page:
<img src="default.jpg" id="result_image" />
When your autocomplete code fills in the text, change the image as well
document.getElementById('result_image').src = autocompleted_text + ".jpg";