I have this nested optgroup:
<select>
<optgroup label="A">
<optgroup label="B">
<option>C</option>
<option>D</option>
<option>G</option>
</optgroup>
<optgroup label="J">
<option>K</option>
<option>L</option>
<option>M</option>
</optgroup>
</optgroup>
</select>
but the result is:
You can use Select from react-select.
import Select from "react-select";
const options = [
{
label: "A",
options: [
{
label: "B",
options: [
{
label: "C",
value: 1
},
{
label: "D",
value: 2
},
{
label: "G",
value: 3
}
]
},
{
label: "J",
options: [
{
label: "K",
value: 4
},
{
label: "L",
value: 5
},
{
label: "M",
value: 6
}
]
}
]
}
];
export const NestedOptGroup = () => <Select name="options" options={options} />
There is a working example of this react-select feature: https://codesandbox.io/s/react-codesandboxer-example-8xxyx?file=/index.js
Source: How can I create nested option groups in React Select (V2)?
you can use only 1 sub group, like this
<select>
<optgroup label="B">
<option>C</option>
<option>D</option>
<option>G</option>
</optgroup>
<optgroup label="J">
<option>K</option>
<option>L</option>
<option>M</option>
</optgroup>
</select>
if you wish add more subgroups you need to hack the identation
here have other answers for this:
Nesting optgroups in a dropdownlist/select
Related
I have this JSON response:
[
{storeWebsites=[
{website_id=1.0, name=Default Store View},
{website_id=0.0, name=Admin}
]},
{storeGroups=[
{website_id=0.0, name=Default, id=0.0},
{website_id=1.0, name=Main Website Store, id=1.0}
]},
{storeViews=[
{website_id=1.0, name=Default Store View, code=default, id=1.0},
{website_id=0.0, name=Admin, code=admin, id=0.0}
]}
]
I would like to group the "website_id" and append the "storeViews.name".
I'm trying to work with the script below but I'm not able to push the values in var group:
var groups = {};
// .... code to push the values in var groups
$.each(groups, function(key, groups) {
var $group1 = $("<optgroup>").attr("label", " " + groups.storeWebsites);
var $group2 = $("<optgroup>").attr("label", " " + groups.storeGroups);
groups.storeViews.forEach(function(el) {
$group2.append(new Option(el.name, el.code));
});
$('#provider-accounts').append($group1, $group2);
});
}
So my "id=provider-accounts" should be populated like below:
<optgroup label="Default Store View"></optgroup>
<optgroup label="Main Website Store">
<option code="default">Default Store View</option>
</optgroup>
<optgroup label="Admin"></optgroup>
<optgroup label="Default">
<option code="admin">Admin</option>
</optgroup>
Any help?
I think you have the following groups swapped:
<optgroup label="Default">
<optgroup label="Main Website Store">
Anyways, you could destructure your sites, groups, and views and keep track of their indices while looping over one of them.
const main = () => {
const [ { storeWebsites }, { storeGroups }, { storeViews }] = json;
$('#provider-accounts').append(storeWebsites.flatMap((site, index) => {
const
group = storeGroups[index],
view = storeViews[index];
return [
$('<optgroup>', { label: site.name }),
$('<optgroup>', { label: group.name })
.append($('<option>', { code: view.code, text: view.name }))
];
}));
};
const json = [{
"storeWebsites": [{
"website_id": 1.0,
"name": "Default Store View"
}, {
"website_id": 0.0,
"name": "Admin"
}]
}, {
"storeGroups": [{
"website_id": 0.0,
"name": "Default",
"id": 0.0
}, {
"website_id": 1.0,
"name": "Main Website Store",
"id": 1.0
}]
}, {
"storeViews": [{
"website_id": 1.0,
"name": "Default Store View",
"code": "default",
"id": 1.0
}, {
"website_id": 0.0,
"name": "Admin",
"code": "admin",
"id": 0.0
}]
}];
main();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="provider-accounts">
<!--
<optgroup label="Default Store View"></optgroup>
<optgroup label="Default">
<option code="default">Default Store View</option>
</optgroup>
<optgroup label="Admin"></optgroup>
<optgroup label="Main Website Store">
<option code="admin">Admin</option>
</optgroup>
-->
</select>
Hi am a beginner in Angularjs, I want to select drop-down selected dynamically.
I refer some blogs but I don't understand that.
This is my HTML code:
<select class="form-control" name="category_id" ng-model="formData.category_id" ng-options="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories" ng-required="true">
<option value="">Select Sub Directory</option>
</select>
Js code:
$scope.getData = function() {
return webServices.getSync('getshops/' + $scope.Id).then(function(getData) {
if (getData.status == 200) {
$scope.formData = getData.data;
console.log($scope.formData);
} else {
$rootScope.$emit("showerror", getData);
}
});
}
$scope.getSubDirectories = function()
{
return webServices.getSync('getSubDirectories').then(function(getData)
{
$rootScope.loading = false;
if (getData.status == 200)
{
$scope.formData.getSubDirectories = getData.data;
} else {
$rootScope.$emit("showerror", getData);
}
//console.log($scope.formData.getSubDirectories);
});
}
My result in console
{
"id": 1,
"membership_type_id": 1,
"name": "Kallyan",
"address": "100 feet road",
"location": "Coimbatore",
"description": "Test",
"banner_image": "upload/directory/contact/directoryMsrq4NhsD1.jpg",
"business_days": [
"M",
"T",
"W",
"Th",
"F",
"S"
],
"start_time": "2019-01-10T09:01:00+05:30",
"end_time": "2019-01-10T10:01:00+05:30",
"contact_number": "9874563210",
"latitude": 11.2,
"longitude": 9.5,
"is_certified": 1,
"status": 3,
"rating": 0,
"is_online_order": 1,
"created_at": "1970-01-01 05:30:01",
"created_by": 0,
"is_active": 1,
"updated_at": "2019-01-09 18:14:22",
"updated_by": 0,
"status_updated_by": 0,
"status_updated_on": "2019-01-09 18:14:22",
"priority": 0,
"comments": "Test",
"additional_information": "",
"old_banner_image": "directoryMsrq4NhsD1.jpg",
"sub_directory": "Jewellery",
"getSubDirectories": [
0: {id: 2, name: "Jewellery", image: "directory5Wltlbhkwl.jpg", thumbnail_image: "directory5Wltlbhkwl.jpg", isparent: 1, …}
1: {id: 3, name: "Mobile", image: "directoryjWQeyCQlGe.jpg", thumbnail_image: "directoryjWQeyCQlGe.jpg", isparent: 1, …}
2: {id: 6, name: "KPN", image: "directoryC8qEC3o3Gh.jpg", thumbnail_image: "directoryC8qEC3o3Gh.jpg", isparent: 1, …}
]
}
My result page:
Here I want to select sub_directory: Jewellery as selected drop-down value.
I don't understand this code in HTML ng-options="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories".
Please give the answer. Thanks in advance.
Try like this way.
<select class="form-control" name="category_id" ng-model="formData.category_id" ng-options="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories" ng-required="true" ng-init="selected='Jewellery'">
<option value="">Select Sub Directory</option>
</select>
I have add this line ng-init="selected='Jewellery'" in your select tag.
<select class="account-form" ng-model="formData.category_id" id="category_id" name="category_id">
<option value="">---Select---</option>
<option ng-repeat="sub_directory.id as sub_directory.name for sub_directory in formData.getSubDirectories" ng-selected="sub_directory.id == 1">
{{sub_directory.name}}
</option>
</select>
Finally i got a result
<select class="form-control" ng-model="formData.category_id" ng-options="directory.id as directory.name for directory in formData.getSubDirectories" ng-init="formData.category_id='2'">
<option value="">Select Sub Directory</option>
</select>
I'm writing a small php page with 2 form:
<div class="input-field col s12">
<select id="select1">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="select2">
<option value="" disabled selected>Choose your option</option>
<option rel="1" value="11">Option 11</option>
<option rel="1" value="12">Option 12</option>
<option rel="2" value="21">Option 21</option>
<option rel="2" value="22">Option 22</option>
<option rel="3" value="31">Option 31</option>
<option rel="3" value="32">Option 32</option>
</select>
</div>
After I select the first select form, I want that only the related values are showed in the second.
My js is:
$(function() {
$("#select1").on('change', function() {
$subcat = $("#select2");
var _rel = $(this).val();
$subcat.find("[rel="+_rel+"]").show();
$subcat.prop("disabled",false);
// re-initialize material-select
$('#select2').material_select();
});
});
I also try with
var selectobject=document.getElementById("select2")
for (var i=0; i<selectobject.length; i++)
{
if (selectobject.options[i].value == 'xxxx' )
{
selectobject.remove(i);
}
}
But I need the name option, not the value.
$(function(){
$('#select1').on('change', function(){
var val = $(this).val();
var sub = $('#select2');
$('option', sub).filter(function(){
if ($(this).attr('rel') === val) {
if ($(this).parent('span').length) {
$(this).unwrap();
}
} else {
if (!$(this).parent('span').length) {
$(this).wrap( "<span>" ).parent().hide();
}
}
});
});
});
I don't see which options at the second form corresponding to the first, however, try populating the second select rather than removing items from it. like:
<select id="select1" onchange="myfunction(this.value)">
<script>
function myfunction(opt){
var $Select2 = $('#select2');
var option1 = [
{
"name": "option description",
"value": "1"
}, {
"name": "option description",
"value": "1"
}]
var option2 = [
{
"name": "option description",
"value": "1"
}, {
"name": "option description",
"value": "1"
}]
if(opt === option1){
$.each(option1, function (i, item) {
$('#mySelect').append($('<option>', {
value: item.value,
text : item.name
}));
});
}
if(opt === option2){
$.each(option2, function (i, item) {
$('#mySelect').append($('<option>', {
value: item.value,
text : item.name
}));
});
}
}
</script>
The following list want to bind in a drop down with condition type="0"
$scope.ListPrintDestination = [{ id: "0", Name: "Printer",Type:"0" }, { id: "1", Name: "Windows" ,Type:"0"}, { id: "2", Name: "No Print" ,Type:"1"}];
then how will modify below code
<select ng-model="num" ng-options="lst as lst.AcNo for lst in lstPrint track by lst.AcNo">
<option selected="selected">select</option>
</select>
You can use filter for Type='0', and in html iterate on ListPrintDestination.
Demo:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function MyCtrl($scope) {
$scope.ListPrintDestination = [{
id: "0",
Name: "Printer",
Type: "0"
}, {
id: "1",
Name: "Windows",
Type: "0"
}, {
id: "2",
Name: "No Print",
Type: "1"
}];
});
<script src="https://code.angularjs.org/1.5.2/angular.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="num" ng-options="lst as lst.Name for lst in ListPrintDestination | filter : {Type : '0'} ">
<option selected="selected">select</option>
</select>
</div>
i a have a combo box where i can choose specific vehicle, each has engine size, name and price wrapped in an array.
If vehicle 1 chosen i want to add their price to the total amount.
Here is my code:
HTML
<select id="selector" onChange="Expedisi(this);">
<option>Select product</option>
<optgroup label="Sedan">
<option value="Lancer EX">Lancer EX 1.6 / 2.0</option>
<option value="Lancer EX GT">Lancer EX GT</option>
<optgroup label="Sport">
<option value="Lancer Evolution X">Lancer Evolution X</option>
<optgroup label="SUV">
<option value="Outlander">Outlander</option>
</select>
JavaScript
var data = {
"Lancer EX" : { img: "cars/mitsubishi/lancerex.png" , label: "Lancer EX " , engine: "1.6 L" , price :"16500" },
"Lancer EX GT" : { img: "cars/mitsubishi/gt.png", label: "Lancer EX GT", engine: "2.0 L" , price: "22000"},
"Lancer Evolution X" : { img: "cars/mitsubishi/evox.jpg", label: "Evolution X", engine:"2.0L Turbocharged", price: "85000" },
"Outlander" : { img: "cars/mitsubishi/outlander.jpg", label: "Outlander", engine: "2.0 L" , price : "33000" },
};
I want to add the price of the chosen vehicle from the combo box to the Total which is 0 at first.
Thank you.
You can access the correct vehicle in your object by using the selected value as the property name.
Example:
data[$(this).val()].price
var data = {
"Lancer EX" : { img: "cars/mitsubishi/lancerex.png" , label: "Lancer EX " , engine: "1.6 L" , price :"16500" },
"Lancer EX GT" : { img: "cars/mitsubishi/gt.png", label: "Lancer EX GT", engine: "2.0 L" , price: "22000"},
"Lancer Evolution X" : { img: "cars/mitsubishi/evox.jpg", label: "Evolution X", engine:"2.0L Turbocharged", price: "85000" },
"Outlander" : { img: "cars/mitsubishi/outlander.jpg", label: "Outlander", engine: "2.0 L" , price : "33000" },
};
var total = 0;
$('#selector').on('change', function() {
total = data[$(this).val()].price;
console.log(total);
$('#thetotal').text("The total is: " + total);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="selector">
<option>Select product</option>
<optgroup label="Sedan">
<option value="Lancer EX">Lancer EX 1.6 / 2.0</option>
<option value="Lancer EX GT">Lancer EX GT</option>
<optgroup label="Sport">
<option value="Lancer Evolution X">Lancer Evolution X</option>
<optgroup label="SUV">
<option value="Outlander">Outlander</option>
</select>
<p id="thetotal"></p>
You can change your Expedisi function like below -
var data = {
"Lancer EX": {
img: "cars/mitsubishi/lancerex.png",
label: "Lancer EX ",
engine: "1.6 L",
price: "16500"
},
"Lancer EX GT": {
img: "cars/mitsubishi/gt.png",
label: "Lancer EX GT",
engine: "2.0 L",
price: "22000"
},
"Lancer Evolution X": {
img: "cars/mitsubishi/evox.jpg",
label: "Evolution X",
engine: "2.0L Turbocharged",
price: "85000"
},
"Outlander": {
img: "cars/mitsubishi/outlander.jpg",
label: "Outlander",
engine: "2.0 L",
price: "33000"
},
};
function Expedisi(elem) {
var total = 0;
total += parseInt(data[elem.value].price, 10);
console.log(total);
}