How to append value " select " to the Select dropdown? - javascript

I want add "All" option to the existing dropdown as a first option. Pls help me
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.empty();
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
}
I want "All" to be the first option in select dropdown

Instead of empty() use .html() and pass the html of the All Option. This will clear the select first then will add all option and then will add other options, and will save you an unnecessary .empty() operation.
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.html('<option value="'+all+'">All</option>');
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}

Try this: You can add ALL option just right after emptying the output variable as shown below -
if(own != null)
{
var ar = own.replace("[","").replace("]","").split(",");
var output = $("#status_type");
output.empty();
output.append("<option value='ALL'></option");//add here
for(var i=0;i<ar.length/2;i++)
{
output.append("<option value='" + $.trim(ar[i*2+1]) + "'>" + $.trim(ar[i*2+1]) + "</option>");
//alert ("val " +$.trim(ar[i*2+1]));
}
}

Try this:
$('#mysampledropdown').empty();
$.each(response.d, function(key, value) {
$("#mysampledropdown").append($("<option></option>").val(value.ID).html(value.text));
});
$('<option>').val("").text('--ALL--').prependTo('#mysampledropdown');

Related

display second menu based on first one along with value and id

I am referring to another question display select options based on previous selections
I have while loop to fill the var data and inside a foreach loop to give the sub-menu and all work fine, var data = {'B|1':['B5|1','B4|2']
now after displaying menu1 How do I display second one, am just stopped there.
my code is:
for (var i in data) {
var ii = i.split('|');
$('#menu1').append('<option value=' + ii[1] + '>' + ii[0] + '</option>');
}
$('#menu1').change(function () {
var key = $(this).val();
$('#menu2').empty();
for (var i in data[key]) {
var ii = data[key][i].split('|');
$('#menu2').append('<option value=' + ii[1] + '>' + ii[0] + '</option>');
}
}).trigger('change');
menu1 is ok, now I need to show #menu2 with the value and text ??
This may help you
$('#menu1').change(function() {
var key = $(this).val();
var keyText = $('#menu1 :selected').text();
$('#menu2').empty();
for (var i in data[keyText +"|" + key]) {
var ii=data[keyText +"|" + key][i].split('|');
$('#menu2').append('<option value='+ii[1]+'>' + ii[0] + '</option>');
}
}).trigger('change');

How to store multiple drop down values inside a variable?

So I have this javascript function that loops through each user account and displays them in a drop-down menu. When the user selects an option from the drop-down menu, it takes the Iban number as its main id which is stored in ddlAccountFrom. Is there a way how I can store two values when the user selects an option, like for instance the Iban and Currency into separate variables?
function getAccountFrom() {
var username = $("#hiddenUsername").val();
var url = "http://localhost:63723/api/BankAccountsApi/GetBankAccounts/?username=" + username + "&id=2";
$.getJSON(url, function (data) {
var table = "<select id=\"ddlAccountFrom\">";
table += "<option value=\"-1\">Select an Account</option>";
$.each(data, function (key, val) {
table += "<option value=\"" + val.Iban + "\">" + val.Iban + " | " + val.Currency + " | " + val.Balance + "</option>";
});
table += "</select>";
$('#divAccountFrom').html(table);
});
}
I am using the ddlAccountFrom in this function..
function Transfer() {
var accountFrom = $("#ddlAccountFrom").val();
var accountTo = $("#txtAccountTo").val();
var amount = $("#txtAmount").val();
var url = "http://localhost:63723/api/BankAccountsApi/TransferFunds/?
ibanFrom=" + accountFrom + "&ibanTo=" + accountTo + "&amount=" + amount;
$.getJSON(url, function (data) {
alert(data);
})
.error (function () {
alert("Not enough balance! The amount entered exceed the balance found in this account. Please try again.");
})
}
You can use the data-custom attribute, like this:
table += "<option value=\"" + val.Iban + "\" data-currency=\"" + val.Currency + "\">" + val.Iban + " | " + val.Currency + " | " + val.Balance + "</option>";
To access variable see jquery-cant-get-data-attribute-value
So you can read:
var selectedCurrency= $("#ddlAccountFrom :selected").data('currency');
You could :
Concatenate your 2 data in 1 string with a separator (for ex myIban#myCurrency) and then split your value to get back your 2 distinct data
Listen to your dropdown changes, for example adding a onchange=updateData(val.Iban, val.Currency) attribute to your option html, and in your js :
var currentIban, currentCurrency;
function updateData(iban, currency) {
currentIban = iban;
currentCurrency = currency;
}
Add a data-custom attribute, like data-currency or data-iban

How can i prevent duplicate entry in java script while appending data into #div

PFB java script code..
the thing is im getting alert for duplicate entry. how can avoid the repeated data?
Var activityconunt =0;
if (activityconunt !== data.iRoundId) {
alert("duplicate");
$("#selectRound_Type").append("<option name='round' id=" + data.iRoundId + ">" + data.strRoundName + "</option>");
}
my output
Solution one:
Take your data and build a clean array before. Using http://api.jquery.com/jquery.inarray/
Solution two:
Check your existing options for containing values
if($("option:contains('" + data.strRoundName + "')").length == 0)
$("#selectRound_Type").append("<option name='round' id=" + data.iRoundId + ">" + data.strRoundName + "</option>");
this should do it as well and is a shorter code
also see Fiddle
Use an array to store the data and check the new value with it:
$(function () {
var items = [];
var $select = $('select');
var $input = $('input');
var $button = $('button');
// fetch current data
$select.find('option').each(function () {
items.push($(this).text());
});
$button.on('click', function () {
var value = $input.val();
var exists = ($.inArray(value, items) != -1);
if (! exists) {
items.push(value);
$('<option></option').text(value).prependTo($select);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />
<button>Add</button>
<br />
<select style="width: 300px;">
<option>Hello</option>
</select>
Solution for preventing duplicate values and undefined value in the list
if ($("option:contains('" + data.strRoundName + "')").length == 0
&& data.strRoundName != null
&& typeof data.strRoundName != "undefined")
$("#selectRound_Type").append("<option name='round' id="
+ data.iRoundId + ">"
+ data.strRoundName + "</option>");

How to get first column value of invoked row in table?

In below context menu example .. how to get value of fist column that invoked it?
Refer Link
tried with $(this).find('td:first').text() but it didnt work.
How to do this?
In your case you can do this:
menuSelected: function (invokedOn, selectedMenu) {
var value = invokedOn.parent().children(':first').text();
var msg = "You selected the menu item '" + selectedMenu.text() +
"' on the value '" + value + "'";
alert(msg);
}
Demo: http://jsfiddle.net/X9tgY/402/
here its working
var arr = [];
$("#myTable tr").each(function(){
arr.push($(this).find("td:first").text()); //put elements into array
});
alert(arr);
Consider this code:
invokedOn.closest('table').find('tr td:first').text()
Complete code:
menuSelected: function (invokedOn, selectedMenu) {
var msg = "You selected the menu item '" + selectedMenu.text() +
"' on the value '" + invokedOn.closest('table').find('tr td:first').text() + "'";
alert(msg);
}
DEMO

Chosen jquery plugin not updating with <optgroup>

strange situation happening here. I'm using the jquery plugin chosen.js. I'm updating a dropdown that is already on the page with an ajax call and jquery. here is a little bit of the sample code.
here is my dropdown as shown in the page.
<div id="singleDropDownBlock" style="display: none">
<select id="SingleDropDown" class="chzn-select" data-placeholder="Choose your start Location" onchange="GetFromNodeValue();">
<!--<option>select a strating locnation based on category.</option>-->
</select>
</div>
This is the code loading the values into the dropdown using jquery.
function GetResultsFromMultiCategory(data)
{
for (i = 0; i < data.d.categories.length; i++)
{
//console.log(data.d.categories[i].catNode);
if (data.d.categories[i].catNode == "0")
{
$('#SingleDropDown').append("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
console.log("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
//onOrOff = false; </optgroup>
}
else
{
$('#SingleDropDown').append("<option " + "value=" + data.d.categories[i].catNode+ ">" + data.d.categories[i].catLoc + "</option>");
console.log("<option " + "value='" + data.d.categories[i].catNode + "'>" + data.d.categories[i].catLoc + "</option>");
if (typeof(data.d.categories[i + 1]) != "undefined")
{
if (data.d.categories[i + 1].catNode == "0")
{
$('#SingleDropDown').append("</optgroup>");
console.log("</optgroup>");
}//end second if
}//end first if
}//end else
}
$('#SingleDropDown').append("</optgroup>");
console.log("</optgroup>");
$("#SingleDropDown").chosen({ placeholder_text_single: "Choose Map" });
$("#SingleDropDown").trigger("chosen:updated");
}
for some reason chosen does not update with the it only updates with the . Is there anything I'm missing? can someone please point me in the right direction.
I also can't get chosen to update the placeholder. All i get is the first item in list as the display.
thanks in advance for any help you can offer.
I have finally figured out my issue. I'll post the answer here so that it may help someone else someday.
The problem here is that appending one select at a time was being closed by the browser. Therefore here is the best way to do this.
function GetResultsFromMultiCategory(data)
{
$("#singleDropDownBlock").show();
$('#SingleDropDown').append("<option></option>");
var myOptions = '';
for (i = 0; i < data.d.categories.length; i++)
{
if (data.d.categories[i].catNode == "0")
{
myOptions += "<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">";
}
else
{
myOptions += "<option " + "value=" + data.d.categories[i].catNode + ">" + data.d.categories[i].catLoc + "</option>";
if (typeof(data.d.categories[i + 1]) != "undefined")
{
if (data.d.categories[i + 1].catNode == "0")
{
myOptions += "</optgroup>";
}
}
}
}
myOptions += "</optgroup>";
$('#SingleDropDown').append(myOptions);
$("#SingleDropDown").chosen({placeholder_text_single: "Choose Start Location" });
}
the take away here is that when using append instead of appending each line, build the string and then append it to the html element.

Categories