Get selected value from multiple select on change in dynamic form
You can get all selected values in array as below:
function displayColorSelected() {
var selected_value = $("[id='color-options']").toArray().map(x => $(x).val());
console.log(selected_value);
}
Note: id selector will always return single element which will be first with that id. So you're getting value for first select only.
You can use attribute selector ([]) instead which will find every element with given id. So here $("[id='color-options']").toArray() will find every element with id equal to color-options and map(x => $(x).val()) will return only value part from the elements array.
Dynamic multiple select menus showing default SELECTED options
By this $("[data-child]").eq(0).trigger("change"); at the end, you're triggering the options from the first select and your remaining selects are automatically set according to your change function despite setting selected attribute to any options. That's why it's not working.
Updated: Without setting initial options in your HTML, you can do this by jQuery as well. Just set the other options below $("[data-child]").eq(0).trigger("change"); this line to achieve your goal in this way.
$("[data-child]").change(function () {
const selectedGroup = $(this).val();
if (selectedGroup == null) {
$('#' + $(this).attr('id')).hide();
} else {
$('#' + $(this).attr('id')).show();
}
var $childSelect = $("#" + $(this).attr("data-child")), index;
value = $childSelect.find("option").hide()
.filter(function (i, e) {
return $(e).val().startsWith(selectedGroup)
}).show().eq(0).val();
$childSelect.val(value);
$childSelect.trigger("change");
});
$("[data-child]").eq(0).trigger("change");
$('#niv1').val("1-3-2").change();
$('#niv2').val("1-3-2-2").change();
$('#niv3').val("1-3-2-2-2").change();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="margin-left: auto; margin-right: auto; padding-top: 50px">
<div class="col-3">
<span>Operating system</span>
<select data-child="niv1" class="selectdata form-control custom-select">
<option value="1-1">Android</option>
<option value="1-2">Linux</option>
<option value="1-3" selected>Windows</option>
</select>
</div>
<div class="col-3">
<span>System version</span>
<select id="niv1" data-child="niv2" class="selectdata form-control custom-select">
<option data-group="1-1" value="1-1-1">9.0 Pie</option>
<option data-group="1-2" value="1-2-1">Ubuntu</option>
<option data-group="1-3" value="1-3-1">Windows 7</option>
<option data-group="1-3" value="1-3-2">Windows 8</option>
<option data-group="1-3" value="1-3-3">Windows 10</option>
</select>
</div>
<div class="col-3">
<span>Edition</span>
<select id="niv2" data-child="niv3" class="selectdata form-control custom-select">
<option data-group="1-3-1" value="1-3-1-1">Windows 7 Home</option>
<option data-group="1-3-1" value="1-3-1-2">Windows 7 Pro</option>
<option data-group="1-3-2" value="1-3-2-1">Windows 8 Home</option>
<option data-group="1-3-2" value="1-3-2-2">Windows 8 Pro</option>
<option data-group="1-3-3" value="1-3-3-1">Windows 10 Home</option>
<option data-group="1-3-3" value="1-3-3-2">Windows 10 Pro</option>
</select>
</div>
<div class="col-3">
<span>Build</span>
<select id="niv3" data-child="niv4" class="selectdata form-control custom-select">
<option data-group="1-3-1-1" value="1-3-1-1-1">Win 7 Home - A</option>
<option data-group="1-3-1-1" value="1-3-1-1-2">Win 7 Home - B</option>
<option data-group="1-3-1-2" value="1-3-1-2-1">Win 7 Pro - A</option>
<option data-group="1-3-1-2" value="1-3-1-2-2">Win 7 Pro - B</option>
<option data-group="1-3-2-1" value="1-3-2-1-1">Win 8 Home - A</option>
<option data-group="1-3-2-1" value="1-3-2-1-2">Win 8 Home - B</option>
<option data-group="1-3-2-2" value="1-3-2-2-1">Win 8 Pro - A</option>
<option data-group="1-3-2-2" value="1-3-2-2-2">Win 8 Pro - B</option>
<option data-group="1-3-3-1" value="1-3-3-1-1">Win 10 Home - A</option>
<option data-group="1-3-3-1" value="1-3-3-1-2">Win 1 Home - B</option>
<option data-group="1-3-3-2" value="1-3-3-2-1">Win 10 Pro - A</option>
<option data-group="1-3-3-2" value="1-3-3-2-2">Win 10 Pro - B</option>
</select>
</div>
</div>Dynamic multiple forms: Change select options based on previous select value
As stated above this was my final answer due to no response:
addForm: function () {
this.count++
let form_count = this.count
form_count++
let formID = 'id_form-' + this.count
incremented_form = this.vue_form.replace(/form-\d/g, 'form-' + this.count)
this.formList.push(incremented_form)
this.$nextTick(() => {
let total_forms = document.getElementsByName('form-TOTAL_FORMS').forEach
(function (ele, idx) {
ele.value = form_count
})
})},
dynamically calculation of multiple select option data value
Like this?
You can use each by class selector for dynamic then check css display
$('body').on('change', '#visitorcount', function() { for (var i = 1; i <= 5; i++) { if (i <= $('#visitorcount').val()) { $('#person' + i).show(); $('#country' + i).show(); } else { $('#person' + i).hide(); $('#country' + i).hide(); } }});$('body').on('change', '.ct,#visitorcount', function() { var priceforcountry = 0; $('.ct').each(function(index,element){ if($(element).parent().css("display") != "none"){ priceforcountry += +$('option:selected', this).data('fee'); } }); $('#totalcost').text(priceforcountry); //alert(priceforcountry);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select id="visitorcount" name="visitorcount"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option></select>
<div id="person1"> <select id="country1" name="visitor1" class="ct"> <option value="india" data-fee="20">India</option> <option value="usa" data-fee="25">USA</option> </select></div><div id="person2" style="display:none" > <select id="country2" name="visitor2" class="ct"> <option value="india" data-fee="20">India</option> <option value="usa" data-fee="25">USA</option> </select></div><div id="person3" style="display:none"> <select id="country3" name="visitor3" style="display:none" class="ct"> <option value="india" data-fee="20">India</option> <option value="usa" data-fee="25">USA</option> </select></div><div id="person4" style="display:none"> <select id="country4" name="visitor4" style="display:none" class="ct"> <option value="india" data-fee="20">India</option> <option value="usa" data-fee="25">USA</option> </select></div>
<div id="person5" style="display:none"> <select id="country5" name="visitor5" style="display:none" class="ct"> <option value="india" data-fee="20">India</option> <option value="usa" data-fee="25">USA</option> </select></div>
<div id="totalcost"></div>get the dynamically created multiple select box values using jquery
Firstly, it looks like you are trying to attach a change handler to a div. This is not possible. From the documentation -
The change event is sent to an element when its value changes. This event is limited to
<input>elements,<textarea>boxes and<select>elements.
To get it to work you can change this -
$('.product-item').change(function() {
to -
$('.product-item select, .product-item input').change(function() {
Secondly, to handle dynamic rows you you need to use event delegation. Using .on you can apply the function to dynamic elements. You will need to change the function to -
$("#product").on('change', '.product-item select, .product-item input', function() { var $line = $(this).parents('.product-item'); var option1 = $line.find('.orderbox1').val(); var option2 = $line.find('.orderbox2').val(); option1 *= $line.find(".orderbox3").val(); option2 *= $line.find(".orderbox3").val(); $line.find(".orderbox4").val(option1 - option2);});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><DIV id="product"> <DIV class="product-item float-clear" style="clear:both;"> <DIV class="float-left"> <input type="checkbox" name="item_index[]" /> </DIV> <DIV class="float-left">Choose Currency: <select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;"> <option selected="selected">Select</option> <option value="66">United States</option> <option value="75">European</option> <option value="12">Philippines</option> <option value="17">Qatar</option>
</select> </DIV> <DIV class="float-left">Choose Product: <select name="item_size[]" id="orderbox2" class="orderbox2"> <option value="1" selected="selected">Select</option> <option value="10">Forex Card</option> <option value="20">Currency Notes</option> </select> </DIV> <DIV class="float-left"> <input type="text" name="item_name[]" id="orderbox3" class="orderbox3" /> </DIV> <DIV class="float-left"> <input type="text" name="item_price[]" id="orderbox4" class="orderbox4" /> </DIV> </DIV> <DIV class="product-item float-clear" style="clear:both;"> <DIV class="float-left"> <input type="checkbox" name="item_index[]" /> </DIV> <DIV class="float-left">Choose Currency: <select name="item_currency[]" id="orderbox1" class="orderbox1" style="width:150px;"> <option selected="selected">Select</option> <option value="66">United States</option> <option value="75">European</option> <option value="12">Philippines</option> <option value="17">Qatar</option>
</select> </DIV> <DIV class="float-left">Choose Product: <select name="item_size[]" id="orderbox2" class="orderbox2"> <option value="1" selected="selected">Select</option> <option value="10">Forex Card</option> <option value="20">Currency Notes</option> </select> </DIV> <DIV class="float-left"> <input type="text" name="item_name[]" id="orderbox3" class="orderbox3" /> </DIV> <DIV class="float-left"> <input type="text" name="item_price[]" id="orderbox4" class="orderbox4" /> </DIV> </DIV></DIV></DIV>Can't set multiple selected value select2 on edit mode
You need to change the way you are appending options to Select Box in your ajax success callback.
Instead of following way to append options.
data = JSON.parse(data);
for(j=0; j<data.length; j++){
html += '<option value="'+data[j].GroupBranchID+'">'+data[j].branch+'</option>';
}
You need to append options using the following method
for(j=0; j<data.length; j++){
var option = new Option(data[j].branch, data[j].GroupBranchID );
$("#area").append(option);
}
Document states that
New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control:
Here is the JS Fiddle which adds New Option to Select Box on a Click Event. In your case, Click Event fires an AJAX Call and remotely fetches data.
Dynamically changing the selected value of dropdown
You should use the patchValue function instead of directly assigning the value when dealing with forms
this.transactionForm.controls['location'].patchValue(stores._store)
Javascript/jQuery: Set Values (Selection) in a multiple Select
Iterate through the loop using the value in a dynamic selector that utilizes the attribute selector.
var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
$("#strings option[value='" + e + "']").prop("selected", true);
});
Working Example http://jsfiddle.net/McddQ/1/
Related Topics
Calculating Sum of Checked Checkboxes
Weird Behaviour With on Click Event Binding; Event Not Firing
How to Set the Multi Sliders in One Page
The Onclick Is Not Working on First Click
How to Pass Checkbox State to Onclick Function in React
Generate and Download CSV File With PHP and Ajax
Reactjs How to Call a Component Function from Another Function on the Same File
Datatables/Tabletools: Format Data as Text When Exporting to Excel
Passing Value from Java to JavaScript
Postman Test - Validating String Values in an Object in an Array
Pass Variable from Android to JavaScript Launched in Webview
How to Hide Blinking Cursor in Input Text
Can We Have Code After Location.Reload(True)
Call Method That Inside Another Component - React Js
404 Error When Trying to Register Serviceworker
How to Validate for Only CSV File Uploads Using the Pattern Attribute Using Html5