I have two select boxes: the first contains all avaible items and the second one contains the items I've selected from the first select box.
$items=$this->Database->getItems();
$mySelect=form_multiselect('addedMaterials', $items, '1', 'id="addedMaterials" multiple="multiple"');
To submit all the items from the second select box I've put this:
function selectAll()
{
var selObj = document.getElementById('addedMaterials');
for (var i=0; i<selObj.options.length; i++) {
selObj.options[i].selected = true;
}
}
So now, I go to the controller, where I want to get the items from the box...
$stuff = $this->input->post('addedMaterials');
My problem is that it only gets the last selected item, not all. How can I get all the items of the select box?
I've found my solution here: Post values from a multiple select
When we declare the multiple select, the attribute "name" must be name='mySelect[]'. In my case it should be:
$mySelect=form_multiselect('addedMaterials[]', $items, '1', 'id="addedPrinters" multiple="multiple"');
Related
I have two multiple select2 boxes, Box1 options are populated dynamically,when i select any option from this select box, it should get added to the new Box2. This scenario is working as required. Problem i am facing is. When i remove any selected item from the Box1, i am able to remove it from Box2. But if that item is selected in Box2 it still remains.
Ex: A,B,C are selected values in Box 1, Box2 gets populated with A,B,C. If i select B,c in Box 2 and if i remove B from Box1. My Box2 items will now be AC. But B,C will still remain selected in Box2.
Can anyone help me in solving this tricky problem.
$("#Box1").on("change", function() {
var box1List = $('#Box1').val();
$('#Box2').empty();
for (var key in box1List) {
var valueField = box1List[key];
var textField = $("#Box1 > option[value='"+valueField+"']").text();
$("#Box2").append($('<option>', {value: valueField, text: textField}));
}
});
$("#Box1").on("select2-removed", function(e) {
console.log("removed val=" + e.val + " choice=" + e.choice.text);
$('#Box2 option[value="'+e.val+'"]').remove();
});
After you alter the child <option> elements of a Select2 <select> element, you should call .change() on it to get it to update its display.
$('#Box2').change();
But in your case, you probably also want to restore the value of the Select2 after you remove and re-add the options.
$("#Box1").on("change", function() {
var val = $('#Box2').select2('val');
$('#Box2').empty();
$.each($('#Box1').select2('data'), function(i, item) {
$("#Box2").append($('<option>', {value: item.id, text: item.text}));
});
$('#Box2').select2('val', val);
});
When you use .select2('val', val) to set the value, you do not need to call .change().
jsfiddle
I have referenced from the post of Pierre de LESPINAY
Glideh. And I tried to apply to my project.
new_data = $.grep($('#my_input').select2('data'), function (value) {
return value['id'] != id_to_remove;
});
$('#my_input').select2('data', new_data);
It worked fine.
I am dynamically creating elements with javascript that end up looking something like this:
<select id="splitUserDDL" name="splitUserDDL[]"></select>
When I attempt to add options, it seems that the first select box is being populated but not the rest. Is there a way that I can add the same options to all of the select boxes?
$('#splitUserDDL').empty();
var userDDL = document.getElementById('splitUserDDL');
var defaultoption = document.createElement('option');
defaultoption.text = '-Select-';
defaultoption.value = 0;
userDDL.add(defaultoption);
Use a class instead of ID.
<select class="splitUserDDL" name="splitUserDDL[]"></select>
Then use jQuery to add the option, and loop over all of them:
$(".splitUserDDL").empty();
$(".splitUserDDL").each(function() {
$(this).append($("<option>", {
text: "-Select-",
value: 0
});
});
I am trying to compare 2 arrays to see if an element in one array is in another array.
But i can't seem to get it to work
//if a categories checkbox is clicked
$j('#cat-dropdown li label input').click(function(e) {
//Get all selected categories
var categories = new Array;
$j('#cat-dropdown li label input').each(function(index, element) {
if($j(this).is(':checked')){
categories.push($j(this).val());
}
}); // Categories variable now has all selected cats
$j('.products-grid li.item').each(function(index, element) {
//get all the cateroies of a product
console.log('//////////////////////'+$j(this).val())
product_cats = $j(this).attr('data-product-categories').split(",");
//Now check if the product categories is in the selected categories
var inCategoryList = false;
for (i=0;i<categories.length;i++){
if($j.inArray(categories[i],product_cats)){
console.log('test '+categories[i])
inCategoryList = true;
}
}
if(inCategoryList == false){
$j(this).hide();
}
});//end each on product-grid li.item
});//end click function
But it is not working , nothing gets hidden.. But also the inArray method seems not be working properly, is there a different way to compare 2 arrays and check if one element is in another.
The basic flow is, user selects a checkbox, the li item has a list of categories attached to it. If the checkbox matches a category then keep the item displayed if there are no matches then hide it
Previously I asked how to do this and was directed to this:
<script>
jQuery.fn.filterByText = function(textbox) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function() {
var options = $(select).empty().scrollTop(0).data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");
$.each(options, function(i) {
var option = options[i];
if(option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};
</script>
(http://www.lessanvaezi.com/filter-select-list-options/)
When I use this filter on the select box it filters both the unselected AND the selected. I'd like it to ONLY filter the unselected because if a user wants to ammend the selections and filters again, the previously selected items go away - unless they meet the filter criteria.
I'm not that good at JavaScript or JQuery and can't understand how I might tell the above script to ignore options that are ":selected" but filter all else.
Here's a jfiddle if it helps: http://jsfiddle.net/UmKXy/ I'd like option one and two to remain selected and in the list when user begins to type.
Thanks for help!
The solution you had would not work with selected elements because he created an array of options at the start and then matched those options against the regex(Without regards to what is actually selected). I've used spans to hide options in the past and created an example for you to see how it works. Here is the link : http://jsfiddle.net/rD6wv/
Here is the code
$(function() {
$("#filterByText").bind('keyup',function(){
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");
$("#filez").find('option').each(function(){
if(!$(this).is(':selected')){
if($(this).val().match(regex) === null) {
$(this).wrap('<span>');
}else if($(this).parent().is('span')){
$(this).parent().replaceWith($(this));
}
}
});
});
});
You simply need to loop through all the options of the select when you type in the textbox.
You then check if it is selected, if it is you do nothing, else you check if it matches the search filter, if it does you wrap it in a span, making it invisible, else it means you need to see it, so you check if it is already wrapped in a span, and in that case you replace it with the option so you can see it again.
to selected the non selected options, use this:
$('option:not[selected]') or $('#myselect > option:not[selected]')
to remove them, use this:
$('option:not[selected]').remove();
in css, :not filters for opposite of what comes in the curved brackets.
and [] is attribute selector.
so :not[selected] means: does not have an attribute whose key is "selected"
i have a four radio buttons in a row.
so i have 10 rows in a table. all radio buttons in a row having same id.
in one time, only one radio button in a row can be selected.
some radio buttons are checked and some non checked.
i want to put a validation when submit the form. when i submit the form if all radio button is non selected in a row then a msg box can be appear.
i have found the radio button id but i am not able to get their value, either true or false.
it show me in a alert box: radiobutton Value is: undefined
here is the method:
function showValue() {
var radioID="radiobutton";
var radiobuttonName;
var radiobuttonValue;
for (var i=0;i<10;i++) {
radiobuttonName=radioID+i;
alert("radiobutton Name is:"+radiobuttonName);
if (radiobuttonName.checked)
{
radiobuttonValue=radiobuttonName.value
}
alert("radiobutton Value is:"+radiobuttonValue);
}
}
Edit:
i have four radio button in a row.
name and id is same of all four button in a row.
suppose, name and id for all buttons in first row is radiobutton0. for second row it is radiobutton1, for third row it is radiobutton2. thus i have 10 rows in a table.
my aim is when i submit the page, one button must be checked in a row else it show a msg box that please fill the corresponding radio button. .
i want to get the value of radio button either true or false.
i run the following code:function get_radio_value()
{
var radioID="radiobutton";
var radiobuttonName;
var radiobuttonValue;
for (var i=0;i<10;i++) {
radiobuttonName=radioID+i;
alert("radiobutton Name is:"+:"+radiobuttonName);
}
}
this method execute the loop and display all radiobutton Names.
How i find radiobuttonValue which is either true or false.
You're trying to alert the .value property of a string (radiobuttonName is just a string, not an element), which is undefined, instead you need something like this:
function showValue() {
var radioID="radiobutton", radiobuttonName, radiobuttonValue, rb;
for (var i=0;i<10;i++) {
radiobuttonName=radioID+i;
rb = document.getElementsByName(radiobuttonName)[0];
alert("radiobutton Name is:"+radiobuttonName);
if (rb.checked)
{
radiobuttonValue=rb.value
}
alert("radiobutton Value is:"+radiobuttonValue);
}
}
In the above we're getting the first element with that name (I'm guessing by your naming conventions), if it had an ID for example, you'd replace document.getElementsByName(radiobuttonName)[0] with document.getElementById(radiobuttonName).