We Keep Coding

How should i bind array with multi select options from dropdown in Angular-2

I am trying to bind the array object with multi select dropdown so I can pass the selected values to model to save with other model details.
Here I am using change event to receive the selcted options value but the function is not working here is my code:
HTML Code:
label class="col-md-3 form-control-label text-right">Customer Name</label>
<div class="col-md-7">
<select multiple="multiple" class="js-example-basic-multiple form-control selectsizing" (change)="oncustomerSelect($event.target.value)" name="customer_name" [(ngModel)]="customer_name.customer" #customer_name="ngModel" [ngClass]="{ 'is-invalid': f.submitted && customer_name.invalid }" required>
<option></option>
<option [value]="customernames.Business_name" *ngFor="let customernames of model_customername">{{customernames.Business_name}}</option>
</select>
</div>
On select any values for dropdown the function oncustomerSelect() should be called which is described in component.ts, but this function call can not be done.
Here is my Component.ts:
customer_name:any={
customer:[]
};
model:any={
product_type:"in stock",
item_code:"ASD34",
customer_name:[]=[]
}
oncustomerSelect(value){
console.log("customer select::"+JSON.stringify(value));
var i=0;
this.model.customer_name[i]=value;
i++;
console.log("model customer::"+JSON.stringify(this.model.customer_name));
}
Please help me, how the function can be called in multiple select and how should I bind array with selected values?
Thank You!

Check for the reference ! in given link you can see you will get the drop-down selected value ,you may can add multi select property and get this done
angular5-select-option-dropdown

Is it possible to get a reference of the array of selected values on a Select2?

I have a select2 which is multiple select.
There are two ways to select an option:
Type and choose on the select box,
There is a menu on which you can click and it will add it to the select2 select box.
It's not properly working this time, but I can already select options using the menu.
What I want to know is, is it possible for me to have a reference of the array of selected values?
Because what I am doing right now is,
I have an array called, selectedValuesArray,
where when I select from the menu, it will push the id of the selection to the selectedValuesArray and
$('#selectbox').val(selectedValuesArray).trigger("change");
So can I just have a reference on the array of the selected value itself so I'll just push and splice items there?
EDIT:
Select2.val() is an array.
I want to have a reference to that array like,
var selectionArray = Select2.val();
And I want to manipulate that array dynamically.
// like adding a selection
selectionArray.push("1");
// or removing a selection
selectionArray.splice(indexOf("1"), 1);
Is it possible?

If I've understood your question properly, you're after something like this:
$("#e1").select2();
$("#checkbox").click(function () {
if ($("#checkbox").is(':checked')) {
$("#e1 > option").prop("selected", "selected");
$("#e1").trigger("change");
} else {
$("#e1 > option").removeAttr("selected");
$("#e1").trigger("change");
}
});
$("#button").click(function() {
console.log($("#e1").val());
});
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css">
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="checkbox" id="checkbox" />Select All
<input type="button" id="button" value="Check Selected" />
Original fiddle can be found here.

Alright I have managed to achive what you want. Here is the code;
var selectedArray = $('#selectbox').val();
var selectElem = $('#selectbox').select2();
//delete '42' from array
var index = selectedArray.indexOf('42');
data.splice(index,1);
selectElem.val(selectedArray);
selectElem.trigger('change');
//add '52' to array
selectElem.push('52');
selectElem.val(selectedArray);
selectElem.trigger('change');
Hope this helps :)

Toggle element when value is selected without know any information about value

I've a problem here and don't know the right path to get this working. I have a table where I store some values and of course I can do CRUD operations on any records. Those values are used to build a SELECT element dynamically. All this works perfectly but I need to toggle one element visibility when specific value is picked. For example:
<select class="change">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
<input type="text" class="show" style="display:none" />
Taking this as input, by default .show is hide, lets said that any time I choose "Value 2" it will be displayed otherwise should be hidden again. I know how to do this at jQuery with this code:
$(".change").on('change', function() {
option = $('.change :selected').val();
if (option == "Value 2") {
$(".show").show();
} else {
$(".show").hide();
}
});
But what's happen if any edit "Value 2" and change it to "VAlue 2" or "VALue 2" or "Value2"? The code will stop working. In this case what did yours do to avoid this?
I can attach to "ID" but again what's happen if any deletes the record with ID=2 and recreate later with ID=10? Then code will stop working again.
I don't know how to get this done, any advice? Ideas? Workarounds?

I guess you are building your dropdown list using data from DB. What I suggest is to add a new column in your table. This column will be a simple bool to determine if your input needs to be hidden or no.
Then you have this HTML code (here new col is "showInput"):
<select class="js-dropdown">
<option value="foo" data-showInput="1">Foo</option>
<option value="bar" data-showInput="0">Bar</option>
<option value="foobar" data-showInput="1">Foobar</option>
</select>
<input type="text" class="js-input" />
And this JS code:
var input = $(body).find('.js-input');
$('.js-dropdown').on('change', function() {
var option = $(this).find(':selected');
var showInput = parseInt(option.attr('data-showInput'));
if (showInput === 1) {
input.show();
} else {
input.hide();
}
});

Click Event and option value

Here i come with two question one is on onload all listbox to be hide depend of radio button listbox had to show/hide listbox but its not working here and other one is i have to check if listbox option value contain null value or empty space if means i have to remove it. thats too not working there any mistake in code could some one help on this .
<script>
if ($('input[name=B]:checked').val() == "city") {
$("#country,#zone,#state,#Areamanager,#outlet").val('');
$("#country_value,#zone_value,#state_value,#Areamanager_value,#outlet_value").val('');
$("#city").show();
$("#country,#zone,#state,#Areamanager,#outlet").hide();
}
$.each(main, function (i, val) {
if (val == "Null Value" || val == "") {
val = null;
}
});
</script>
Refer the link

Had a look at the fiddle provided
Fiddle http://jsfiddle.net/Varinder/tHXN3/1/
It is considered bad practice to inline JS event calls.
Usualy it is a good indication to refactor if you notice the logic being repeated more than three times.
Correct me if im wrong, you're requirements are:
show a bunch or dependant fields based on the radio button selected
reset all the fields that are not related to currently active radio button
on page load strip off all the select box options that are either having "Null value" or simply an empty string.
A little bit of refactoring on HTML side of things can go a long way when traversing it via jQuery:
Heres the structure i reckon will suit your requirement ( more on this further down ). And i've simplified it a bit by only working on the first radio button row:
<table cellpadding="0" cellspacing="0" border="2">
<tr>
<td><input type="radio" name="A" data-dependson=".maingroup-section"/></td>
<td><font size="2">Main Group</font></td>
<td><input type="radio" name="A" data-dependson=".subgroup-section"/></td>
<td><font size="2">Sub Group</font></td>
<td><input type="radio" name="A" data-dependson=".itemname-section" /></td>
<td><font size="2">Item Name</font></td>
</tr>
</table>
<div class="form-row">
<div class="maingroup-section">
field values related to main group:<br />
<select id="maingroup">
<option value="Null Value">Null Value</option>
<option value="1">AA</option>
<option value="2">BB</option>
<option value="3">CC</option>
<option value="Null Value">Null Value</option>
</select>
<input type="hidden" id="maingroup_value" />
</div>
<div class="subgroup-section">
field values related subgroup:<br />
<select id="subgroup">
<option value="Null Value">Null Value</option>
<option value="1">DD</option>
<option value="2">EE</option>
<option value="3">FF</option>
<option value="Null Value">Null Value</option>
</select>
<input type="hidden" id="subgroup_value" />
</div>
<div class="itemname-section">
field values related to itemname:<br />
<select id="itemname">
<option value="Null Value">Null Value</option>
<option value="1">GG</option>
<option value="2">HH</option>
<option value="3">II</option>
<option value="Null Value">Null Value</option>
</select>
<input type="hidden" id="itemname_value" />
</div>
</div>
First things first, you'll notice the use of data-attributes in this case its data-dependson which contains class name of div containing dependant fields
JS
Start off by caching references to all the elements that will be (ab)used:
var $aGroupRadioButtons = $("input[name='A']");
var $formRow = $(".form-row");
var $allDropdowns = $formRow.find("select");
Handling FormSections ( .maingroup-section, .subgroup-section etc ) can be abstracted away in a function like below, it takes reference to currently active formsection and hides and resets the value of sibling form sections.
function handleFormSections( $formSection ) {
var $currentFormSection = $formSection.show();
var $otherFormSections = $currentFormSection.siblings().hide();
resetFormSections( $otherFormSections );
}
And resetFormSections function resets input and select elements of the form sections provided by the argument
function resetFormSections( $formSections ) {
$formSections.find("select").val("");
$formSections.find("input").val("")
}
Well, the above two functions are good enough to show dependant form section, hide and reset other form sections.
Now you can hook up those functions via event handlers, im using jQuery 1.8 so i can use $(selector).on("event", handler) syntax.
$aGroupRadioButtons.on("click", function(e) {
var $radioItem = $( this );
var dependantSectionName = $radioItem.attr("data-dependson");
var $dependantSectionElement = $( dependantSectionName );
handleFormSections( $dependantSectionElement )
});
As from the code above, its looking at the data-dependson value to identify which form section to show and which ones to hide.
And somewhere along the line you'd want to strip off empty or null values. Again, how about we create a function to handle that for us? and maybe call it removeNullOrEmptyOptionsFrom( selectBox ) which will recieve a selectBox element to work on, heres how:
function removeNullOrEmptyOptionsFrom( selectBox ) {
var $selectBoxOptions = $(selectBox).children();
$selectBoxOptions.each(function() {
var $option = $(this);
var optionValue = $option.attr("value");
if ( optionValue == "Null Value" || optionValue == "" ) {
$option.remove();
}
});
}
Now, you can call the above function on every select box in the .form-row container like below:
$allDropdowns.each(function() {
removeNullOrEmptyOptionsFrom( this );
});
I noticed in your code there is a call to combobox method, if it is a jQuery plugin then probably a good idea to call it after we've stripped off all the null or empty options:
// $allDropdowns.combobox(); // initialize combox once maybe after reseting selects?

Drop down product, put price in text field

I need to create a simple drop-down menu with 5 items (widget1, widget2, widget3, etc..) and a corresponding value which is the price. When the user clicks the 'Price button' after selecting the widget, I need the price to show up in the text box. This is what I've pulled from other snippets, but can't figure out the second part after the 'var x' to insert it into the text area.
function displayResult()
{
var x=document.getElementById("dropdown").value;
}
And the html...
<form action="">
<select id="dropdown" >
<option value="$1">widget1</option>
<option value="$2">widget2</option>
<option value="$3">widget3</option>
<option value="$4">widget4</option>
</select>
<button type="button" onclick="displayResult()">Price</button>
</form>
<textarea = id="showprice" size="10" maxlength="10"></textarea>
Most of the examples I've found change the text box after the drop down is selected, I need it work after the button is clicked. Thanks

You're so close already. Just reverse the process you used to get the value but use the id of the textbox and set its value property:
function displayResult() {
var x=document.getElementById("dropdown").value;
document.getElementById("showprice").value = x;
}
If that is the only thing that displayResult() does you don't need the x variable:
document.getElementById("showprice").value = document.getElementById("dropdown").value;