So, I have this multiple choice select2 that gets its options via database query and I wanted to show in an input the number of options that are selected. However, I wanted to do it as soon as they are selected and I don't know how to do it. For example, if I choose 2 options and then, later, I decide to add one more, I want the input to change to 3 options selected. Any help is appreciated and if you have other ideas like how I can do similar stuff but not like how I described it your help is appreciated too. Thanks
<select name="select_areas_educ_form" id="select_areas_educ_form" class="form-control js-example-tokenizer" multiple="multiple">
<?php foreach ($areas_educacao as $area)
{
echo '<option value="'.$area['id_areaeducacao'].'">'.$area['cod'].' - '.$area['designacao'].'</option>';
}
?>
</select>
So, its much more simple than what I expected, so if anyone need the answer I'll leave it here. You just basically need to add an "onChange" in your select that calls a function. The function will count the number of options selected via jquery and after, change the placeholder of the input. Its very simple and now I can't explain how I didn't think of this before
function opcoes_select_areas_educ_form()
{
var n_opcoes = $("#select_areas_educ_form :selected").length;
document.getElementById("total_areas").placeholder = n_opcoes;
}
I got a jquery-editable-select plugin from here
It doesn't work as a normal select>option> tags. I tried adding many different eventListeners and still have no success. Basically, I want to alert the selected value when one of the options is being selected and also alert the text value when users decide to type it into the text field.
<select id="editable-select">
<option>Alfa Romeo</option>
<option>Audi</option>
<option>BMW</option>
<option>Citroen</option>
</select>
$('#editable-select').editableSelect();
Please include the plugin js & css files under src folder before you test this.
It should look something like this.
The plugin turns original HTML to this.
Thanks a lot!
The plugin has a Listener
Listen changes
$('#select')
.editableSelect()
.on('select.editable-select', function (e, li) {
$('#last-selected').html(
li.val() + '. ' + li.text()
);
});
jQuery Editable Select Demo
I'm using Select2 in a combination of dropdown menus. I have one menu for "Countries" and one for "States/Provinces". Depending on the country that is chosen, the "States/Provinces" dropdown changes in content. The states/provinces are pulled with ajax from a database and then displayed this way:
$display_output = '<select style="width:350px;" tabindex="2" name="state" id="state" data-placeholder="Choose a Country..."> ';
$display_output .= '<option value="" selected>Select a State</option> ';
while ($state_details = $this->fetch_array($sql_select_states))
{
$display_output .= '<option value="' . $state_details['id'] . '" ' . (($selected_value == $state_details['id']) ? 'selected' : ''). '>' . $state_details['s.name'] . '</option>';
}
$display_output .= '</select>';
So far, so good. All the provinces change correctly, however when it initially loads, the Select2 shows "undefined" for the states dropdown, even though I have it set as
data-placeholder="Choose a Country..."
I'm assuming it could be because on loading, the country selected is "United States" and it populates a list of states but none of them is default or selected. Is there any other way to define a default value so that it doesn't show "Undefined"?
And another (but less important) problem is that when someone chooses "United States" for example, and then chooses "Arizona", if the person then changes to "Canada" as the country, the state of "Arizona" still stays but when opening the dropdown the provinces of Canada are selectable. Is there any way to return it to the default value temporarily when someone selects another country, until a province is chosen again?
My loading code is currently just:
<script>
$(document).ready(function() { $("#state").select2(); });
</script>
Select 3.*
Please see Update select2 data without rebuilding the control as this may be a duplicate. Another way is to destroy and then recreate the select2 element.
$("#dropdown").select2("destroy");
$("#dropdown").select2();
If you are having problems with resetting the state/region on country change try clearing the current value with
$("#dropdown").select2("val", "");
You can view the documentation here http://ivaynberg.github.io/select2/ that outlines nearly/all features. Select2 supports events such as change that can be used to update the subsequent dropdowns.
$("#dropdown").on("change", function(e) {});
Select 4.* Update
You can now update the data/list without rebuilding the control using:
fooBarDropdown.select2({
data: fromAccountData
});
It's common for other components to be listening to the change event, or for custom event handlers to be attached that may have side effects. Select2 does not have a custom event (like select2:update) that can be triggered other than change. You can rely on jQuery's event namespacing to limit the scope to Select2 though by triggering the *change.select2 event.
$('#state').trigger('change.select2'); // Notify only Select2 of changes
select2 has the placeholder parameter. Use that one
$("#state").select2({
placeholder: "Choose a Country"
});
Use the following script after appending your select.
$('#state').select2();
Don't use destroy.
Finally solved issue of reinitialization of select2 after ajax call.
You can call this in success function of ajax.
Note : Don't forget to replace ".selector" to your class of <select class="selector"> element.
jQuery('.select2-container').remove();
jQuery('.selector').select2({
placeholder: "Placeholder text",
allowClear: true
});
jQuery('.select2-container').css('width','100%');
Got the same problem in 11 11 19, so sorry for possible necroposting.
The only what helped was next solution:
var drop = $('#product_1'); // get our element, **must be unique**;
var settings = drop.attr('data-krajee-select2'); pick krajee attrs of our elem;
var drop_id = drop.attr('id'); // take id
settings = window[settings]; // take previous settings from window;
drop.select2(settings); // initialize select2 element with it;
$('.kv-plugin-loading').remove(); // remove loading animation;
It's, maybe, not so good, nice and precise solution, and maybe I still did not clearly understood, how it works and why, but this was the only, what keeps my select2 dropdowns, gotten by ajax, alive.
Hope, this solution will be usefull or may push you in right decision in problem fixing
The solution:
Once the content is loaded via ajax you can no longer attack generically like eg ‘.select2’. Because now other elements have this class as the span generated by select2.
So after loading ajax you need to call a method to check if select2 is already instantiated and instantiate it individually.
jQuery('select.select2').each(function (i, obj) {
if (!jQuery(obj).hasClass("select2-hidden-accessible")) {
jQuery(obj).select2();
}
});
My article about
enter link description here
Suppose you are only interested in replacing select2 data:
$('#selector').html('').select2({
data: //new data
})
Initialize again select2 by new id or class like below
when the page load
$(".mynames").select2();
call again when came by ajax after success ajax function
$(".names").select2();
I am trying to populate a text field with the value of the select field.
So based on the selection the text field should change.
In this case, I am selecting First Name and Last name of the person and in the
option value="I have person email here"
Now, I am using onchange event on select element which calls the findemail() function.
Problem is I am getting the correct emails return but
it redirect me to another page and show me the value there.
Can anyone please help me?
CODE
function findemail(e)
{
document.getElementById('man-email-add').innerHTML=document.write(e.value);
}
HTML (I am using PHP to get all the values)
<select id="manager_detail" onchange="findemail(this.options[this.selectedIndex]);">
<?php
foreach ($data['display']['userMangers'] as $manager){
echo $manEmail = $manager['Email'];
echo "<option value='$manEmail'>".$manager['First_Name'].' '.$manager['Last_Name'].' ('.$manager['Position'].')'.'</option>';
}
?>
</select>
Redirect to new page to show the value:
It's because you're using document.write() after the page has loaded, which doesn't look necessary here anyway:
document.getElementById('man-email-add').innerHTML= e.value;
Does it redirect to new page or reloads the same page showing the email? I believe it's doing the later as document.write(e.value); writes that value to the page. So replace document.write(e.value); with e.value;
If man-email-add is an input field, use document.getElementById('man-email-add').value=e.value;
I am able to get input element's value using
var flt=$("#flt"+rowID).val();
but cannot get select elements value
here is my php code
<?php
$AC= & getAC();
while ($rowAC=mysql_fetch_array($AC)){
$i++;
if ($rowAC['acode']==$row['TPE']){
echo "<option value='{$rowAC['acode']}' selected='selected'>{$rowAC['name_ru']}</option>";
}else{
echo "<option value='{$rowAC['acode']}'>{$rowAC['name_ru']}</option>";
}
}
?>
I am generating list using this php code but
cannot even getting it's text value coding in such a way
var tpe=$("#tpe option[value='2']").text();
window.alert(tpe);
I am concerned only to get it's option value!!!
How to get it???
After some quick testing, it appears that value() only works on the select element itself. To get the value of the different option elements, you can use attr('value') on the option elements themselves.
Very quick demo: http://jsfiddle.net/y9Dqg/2/