Add options to my Select2 - javascript

I have one problem. I use Select2 in my page, and I would like to modify it a little. This is my example:
<select id="mySelect" multiple>
<!-- -->
</select>
var data = [{
id: 1,
text: "sample_1",
version: "1"
},{
id: 2,
text: "sample_2",
version: "2"
}]
$("#mySelect").select2({
data: data
});
JSFIDDLE example
In this example displays the text from the downloaded JSON. But what if I wanted a to modify the search? When entering text, it appears next to a third value version with JSON, but if I click on value version will not add to select.
Eg. When i Search in select, my select looks like:
- text_1 - "version"
- text_2 - "version"
but if I click some option, for example text_1, that only adds to the select box text_1 no version, that is, as far. I think that the example of Templating shows a bit of my problem. Only when you click, for example, in Alaska flag disappears and the text remains in the select
Any suggestions how I can do this?

With templateSelection and templateResult you can control both the search results and the view of selected item
$("#mySelect").select2({
data:data,
templateSelection: function(val) {
return val.text +" - " + "version" + val.version;
},
templateResult: function(val) {
return val.text +" "+ val.version;
}
});

Related

How to put a link in a drop list option?

I have a drop down list. I want the options to contain 2 parts. First part will contain the name of the option and the second part will contain a link which will open a dialog box, where user can edit the name of that particular option.
When the user clicks on the name, the option should get selected. When the user clicks on edit link, it should open the dialog box, the option should not get selected in this case.
Also, I want to have access to this option's name when the user clicks on the edit link. I searched a lot on this, but could not find any solution.
Thanks.
var elements = ['abc', 'def', 'ghi'];
$("[name='inputboxname']").textcomplete([{
match: /{(\w*)$/,
search: function (term, callback) {
callback($.map(elements, function (element) {
return element.indexOf(term) === 0 ? element : null;
}));
},
index: 1,
replace: function (element) {
return ['{' + element + '}', ' '];
},
template: function (value) {
return '<div class="onleft">' + value + '</div><div class="onright">Edit </div>';
}
}], {
header: '<button data-hook="addnew" class="wendda">Add new</button>',
maxCount: 5
});
I want the options to contain 2 parts. First part will contain the
name of the option and the second part will contain a link which will
open a dialog box
Basic html select tag won't help here, you need external plugin e.g. select2.
Like this,
<select onChange="window.location.href=this.value">
<option value="www.google.com">Google</option>
<option value="www.gmail.com">Gmail</option>
</select>
You can't add a href tag in option, but you can use like this-
<select>
<option> option1 </option>
<option> option1 </option>
<option onclick="window.location.href='your_page.html'"> Option 3</option>
</select>
I hope it will helps you.

How to make a <option> default selected for a ajax-filled <select> with JQueryMobile?

I fill my <select> with the response from ajax call.
Here's the JS code:
var myOptions = {val1 : project1,
val2 : project1,
val4 : project1,
val5 : project1,
};
$.each(myOptions, function(val, text) {
$('#projectid').append(
$('<option ></option>').val(val).html(text)
);
});
my html code:
<input type="hidden" name="ehidden" value="true">
<select name="project" id="projectid"></select>
The required DropDown list I get is ok, but I can't set the first <option> to default selected.
Here's some code I already tried:
$('select.projectid').find('option[value="val1"]').prop('selected', true);
I got no error, but also no result. The same with this one:
$("#projectid").val($("#projectid option:first").val());
Second Problem:
the first <option> is not available the first time I select it per mouseclick, I have to first select the second <option> and then the first again.
Your selector is wrong on this line:
$('select.projectid').find('option[value="val1"]').prop('selected', true);
That is selecting a drop-down with a class of projectid. It should be:
$('#projectid').find('option[value="val1"]').prop('selected', true);
...which will select the element with an id of projectid.
Concerning this code:
$("#projectid").val($("#projectid option:first").val());
I'm not sure what you intended it to do, but it will select the first option in the drop-down. If no other option is selected, the first one is selected by default. So, if you were to run this code when the page loads, it of course would do nothing since the first option is already selected.
Concerning your "second" problem, you need to post that as a separate question as it's unrelated to this one. But, be sure to search for an answer to it here on SO before you pose it.
There are a few improvements you can make to your code that will make it simpler and allow you to easily mark the selected option. Here is a jsfiddle to solve your problem: jsfiddle
var myOptions = [
{ name: "A", value: "val1", selected: true},
{ name: "B", value: "val2"},
{ name: "C", value: "val3"},
{ name: "D", value: "val4"}
];
var optionsHtml = "";
for(var i = 0; i < myOptions.length; i++) {
var val = myOptions[i];
optionsHtml += '<option value = "' + val.value + '"';
if(val.selected)
optionsHtml += 'selected="' + val.selected + '"';
optionsHtml += '>' + val.name + '</option>';
}
$('#projectid').append(optionsHtml).selectmenu('refresh', true);;
Explanation
You will want to just build the html for your options and then appending to all the selects once. This will improve the performance of your code because you will only be appending once, thus causing the browser to do one redraw.
Doing it this way you can build the options as a string. I don't know how you determine which option to select but you should be able to change the if clause to suit your needs.
What you tried
$('select.projectid').find('option[value="val1"]').prop('selected', true);
This will not work because your selector is wrong. You are using the id as a class here you want:
$('#projectid')
$("#projectid").val($("#projectid option:first").val());
I'm not sure why this does not work. But you would not want to do it this way because it would be hard to select the option dynamically.
EDIT
To get the select in jQuery Mobile to update its selection you must call refresh. See the documentation here.

angularjs - remove option from input select

Can't figure this out for the life of me. Using AngularJS.
I have a dropdown Select field with several options. It is a part of a form that may be completed multiple times (ie "add another" type form). Now, one of the options may only be used once. How can I remove this option from all other select fields after it has been used?
What I'm working with:
html
<select ng-model="item.itemtype">
<option ng-repeat="i in itemtype" value="{{i}}" ng-init="item.itemtype = itemtype[0]">{{i}}</option>
</select>
angularjs
$scope.Items = [
{ 'itemtype': '', 'desc': '', 'color': '' }
];
$scope.itemtype = [
'shirt',
'pants',
'hats',
'shoes',
'special'];
What I've tried (and really doesn't work)
$scope.specialremove = function() {
var exist = Items.indexOf("special")
if (exist !== 0) {
return '';
}
else {
return 'special';
}
}
I'm hoping I don't have to turn to any other framework to solve this. Feel free to point out any other problems/errors/inefficiencies in my code.
The first thing that can help is using ng-options:
ng-options="type for type in itemType".
It would be better to have objects with label and value properties, in order to write it as
ng-options="type.value as type.label for type in itemType"
and separate the displayed label from the actual value of the selection.
In your controller you should have something like:
$scope.itemType= [
...
];
$scope.selectedItem= $scope.itemType[0];
So that you can write the select as:
<select ng-Model="selectedItem" ng-options="item.value as item.label for item in itemType"></select>
To remove a selected item you can watch the value of selectedItem in the controller: when it matches the value you want, remove it from the array and update selectedItem accordingly.
Here is a basic fiddle. I simply remove the third option after selecting it, and reset the selected item to the first.

AngularJs's ng-options - clarification?

I have this small demo.
Basically , it's a select element with this data :
address: {
select: {
code: "0",
name: "Select proof of address"
},
letter: {
code: "1",
name: "Letter"
},
photograph: {
code: "2",
name: "Photograph"
}
}
And here is the select
<select ng-model="current.addressCode" ng-options="value.code as value.name for (key,value) in student.address"</select>
Questions:
Question #1 - Looking at the Ng doc -
And so , I try to compare
value.code as value.name for (key,value) in student.address
to the second line ( which i find most appropriate)
select as label for (key , value) in object
What is going on here ?
value.code goes to select ???
Html select element has an option tag with value and inside text like :
<option value="volvo">Volvo</option> thats' all.
What did they mean in their docs ?
Question #2
How can I bind this object of myne to a regular sane value,text select ?
(I want the code to be the value and the name to be as text)
Currently I dont see any value in the dom :
You are correct in understanding that example two fits your needs, that is:
select as label for (key , value) in object
Here, as the documentation mentions:
select: The result of this expression will be bound to the model of the
parent <select> element. If not specified, select expression will
default to value.
So, for your use case, your existing code for the select tag is correctly structured:
<select ng-model="current.addressCode" ng-options="value.code as value.name for
(key,value) in student.address"></select>
value.code value is stored in current.addressCode while, in the select dropdown, you should see value.name as the options label.
EDIT: So, to answer your questions:
Question 1
In this case, "select" is just a variable name - a placeholder if you may like for the documentation to explain about it (which it does further below). In your code, the value of the variable that is used instead of select is the one that gets bound to the select's ng-model (In your case, value.code)
Question 2
Exactly as you have mentioned:
<select ng-model="current.addressCode" ng-options="value.code as value.name for
(key,value) in student.address"></select>
This will give you the necessary value, text select tag automatically. When you select an option, the value.code associated with that option gets stored in current.addressCode
http://jsfiddle.net/7FL76/1/
how about this:
it requires simple change :
address: [
{
code: "0",
name: "Select proof of address"
},
{
code: "1",
name: "Letter"
},
{
code: "2",
name: "Photograph"
}
]
the reason is your Key is same as nested Name ( like, letter - Letter ) , so json is a bit redundant.
as result you will see.
value as a code, and text as a name .

Selectbox display "value" replace witht jquery?

Exist any way to replace option display value?
I mean, here i need to replace "one"->"first option", "two"->"second", there are also already values also available.
HTML
<select id="selecttool">
<option value="7">one</option>
<option value="3">two</option>
<option value="375">three</option>
</select>
JavaScript
$(document).ready(function() {
$("#selecttool").children().val("-79");
if($("#selecttool").val('7')) {
}
});
Here is my JSfiddle, so i tried to replace, but don't know how to insert value:
JSFiddle
You can pass a function to the text() method for each option:
$('#selecttool option').text(function(){
return this.value;
});
JSFiddle
EDIT
If you want 'custom text' you'll need to get it from somewhere, so create an array:
var vals = ['first option', 'second option', 'third option']
$('#selecttool option').text(function(i){
return vals[i];
});
JSFiddle
ANOTHER
If you wanted to select on the text within the option:
$('#selecttool option:contains(one)').text('first option');
You can pass your text to the text() function as follows
$("#selecttool option[value='79']").text("label");
your way of selecting the element is wrong. you should select OPTION, not SELECT.
like:
$('#selecttool option').eq(0).text("First Item"),
But, this will be very much mannual work, because you need to it one-by-one for all the options. So, if you have all the text, store it in an array as suggested oGeez, and then do a loop. like :
var labels = ["First Item", "Second Item", "last Item"];
$('#selecttool option').each(function(c, obj){
$(obj).text(labels[c]);
});
yes you can easily replace value with jquery like this
var value = $("#text").val(); // value = one use $("#text").text() if you are not on select box...
value = value.replace("1", "one");

Categories

Resources