I need to change an option text inside a jQuery Select2.
The following works to change the hidden input value
var select2 = $('#myselect2id');
var option = select2.find("option[value='" + 13 + "']");
option.text("this is the new text");
But after that i would need to change the displayed text.
Looking around, i found it can be done by calling
select2.select2();
to rebuild the select2. It works, but it loses all the html classes it had.
And that means a completely different appearance.
Update:
The select2 is used with an hidden select field (it's based on Kartik's Yii2 Select2 widget)
Anyway when the select2 function is called, the spans built by the widget lose their classes
Related
I have a DAL field with data-html attribute and populated with Select2QuerySetView::get_queryset(). I have overridden get_result_label(). For the same queryset result, get_result_label() may return different labels depending on some condition. The result labels are fetched correctly. But after selecting an option, its text displayed in the select box remains fixed even after it has subsequently changed and is re-selected from the dropdown list.
To demonstrate, here are some sequential screenshots. I am returning current time from get_result_label().
Initial results, first option being selected.
First option selected (17:42:08). New results fetched.
Second option selected at 17:42:29. Shown correctly in box. New results fetched.
First option with updated text (17:42:56) selected again. But in the box it still shows the original text (17:42:08).
Am I missing something? Or is there any workaround in DAL or Select2?
Answering own question: After trial-and-error, found that clearing the HTML in select2:selecting event seems to be working.
$(('#my_select2_id').on('select2:selecting', function(e) {
$('#' + this.id).html('');
});
Not sure if this is the correct way, though.
I want to change an option's text on the fly. The HTML can be changed easily by:
$('option[value=custom-pub]').text("New Text For Pub");
How can I force select2 to refresh the text? I don't want to destroy() and create the select2 object from scratch, because I want the user selection to stay selected.
Simply
$("select").select2();
works.
How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website
http://www.jobnisit.com/en
It look cleaner in terms of UI in my opinion.
Ps. sorry, I can't post the image now.
There is 2 ways to do this.
1) With css:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.
2) With js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.
Tested with select2 4.0.0
The proper way of positioning the dropdown is using the core feature provided by select2 plugin.
It provides us with 'dropdownParent' property to place to dropdown inside the particular element
select field: #edit-field-job-skillsets-tid
parent item: div.form-item-field-job-skillsets-tid
jQuery("#edit-field-job-skillsets-tid").select2(
{dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
);
For the JqueryUI tag-it widget, I'd like to completely prevent the new extra text entry field from appearing. I'm pre-populating with existing tags, and I'd just like to allow people to delete tags but not enter them.
I can make the new field read-only, but the field remains visible in IE and in both IE and Firefox clicking in the area of the widget causes the cursor to focus on that field.
What I'd like to do is get rid of the extra input field altogether.
There doesn't seem to be a tagit property for this associated with the .tagit() method. Is there something else I can do to prevent the extra field from being created?
Thanks,
doug
Try this:
$('#tagit').tagit({
//options
}).ready(function() {
$(this).find('.tagit-new').css('height', '13px').empty();
});
Using firebug we can see that the input field created by tagit is in a li element with class tagit-new. We need to set the height otherwise the tag container will squash to a slither when the last tag is deleted, and then we can empty() this to get rid of the tag input field.
I have this case where I set a current item from a list and I need to use a textarea to edit that element's value.
Because of some constraints I have to use a keyup event but I don't think that's a problem.
Check this fiddle: http://jsfiddle.net/terebentina/Euj2C/
click on first/second buttons - it works, it changes the text in the textarea to the value of each element.
change the text in the textarea to something
click on the first/second buttons again - the textarea is not updated anymore. If you look in console, you can see that it switches between the elements, it's just that the textarea is not updated anymore.
Any suggestions? this is driving me nuts!
I know there is a better way modifying your directive to do this but as a quick fix for now you can try binding your textarea to a ngModel value that is just a copy of the current text in the selected element:
<textarea keyup="" ng-model="keyupText"></textarea>
With this in as your current function:
$scope.current = function(idx) {
$scope.current_element = $scope.elements[idx];
$scope.keyupText = $scope.current_element.value;
console.log('current is', $scope.current_element.value);
}
See this fiddle for an example.