Develop Reference

How to use nested optgroup reactjs

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

json multidimensional array to tree structure in javascript

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>

Angularjs drop-down select dynamically

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>

How to get price from AJAX

I'm on a problem for few time ! I've a payment thing, where I use AJAX (to change the price directly when the user change a select), but the problem is, I don't know how to get the price (and verify it's the good price) to insert into the paypal Payment ! I tryed session with PHP etc.. But the price value wasn't changing :/
Index.php:
<div class="col-lg-12 animated fadeIn">
<div class="col-sm-6 col-md-6 col-lg-3 order-actual-rank">
<p>Rang actuel</p>
<img id="current_league_img" src="assets/img/tiers/silver.png" alt="Silver" class="order-rank-img">
<div>
<select name="order-division-actual_league" class="form-control" id="actual_league" onChange="changeCurrentLeague(); getDivPrice()">
<option value="Bronze">Bronze</option>
<option value="Silver" selected>Silver</option>
<option value="Gold">Gold</option>
<option value="Platinum">Platinum</option>
<option value="Diamond">Diamond</option>
</select>
</div>
<div>
<select name="order-division-actual_division" onchange="getDivPrice()" id="actual_division" class="form-control">
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5" selected>V</option>
</select>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-3 order-desired-rank">
<p>Rang désiré</p>
<img id="desired_league_img" src="assets/img/tiers/gold.png" alt="Gold" class="order-rank-img">
<div>
<select name="order-division-desired_league" onchange="changeDesiredLeague(); getDivPrice()" id="desired_league" class="form-control" id="desired_league">
<option value="Bronze">Bronze</option>
<option value="Silver">Silver</option>
<option value="Gold" selected>Gold</option>
<option value="Platinum">Platinum</option>
<option value="Diamond">Diamond</option>
</select>
</div>
<div>
<select name="order-division-desired_division" onchange="getDivPrice()" id="desired_division" class="form-control">
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5" selected>V</option>
</select>
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 order-division-order">
<ul>
<li>Division : <span id="division_infos"></span></li>
<li>Prix : <span id="boost_price"></span></li>
</ul>
<select name="order-division-server" class="form-control" style="width: 100px; margin-top: 10px;">
<option value="euw" selected>EUW</option>
<option value="eune">EUNE</option>
</select>
<input type="checkbox" onchange="getDivPrice()" id="order-duo" name="order-division-duo" style="height: 20px; width: 20px; vertical-align: top;">
<label for="order-duo">Duo</label>
<div id="paypal-button" class="form-paypal">
</div><script type="text/javascript" src="assets/js/checkout.js"></script>
console.log(data);
paypal.Button.render({
env: 'sandbox', // Or 'sandbox'
style: {
label: 'generic',
size: 'small', // small | medium | large | responsive
shape: 'rect', // pill | rect
color: 'gold', // gold | blue | silver | black
tagline: false
},
client: {
sandbox: 'AYh_cbrBW8_Ic8QLBh_hXPLpzbzFqc4_ckRsnH3cZ60oxheTz3CdZOgxlPK4TMDBF-ZiUR4EomVHMAkx',
production: ''
},
commit: true,
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '0.01', currency: 'EUR' }
}
]
}
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(payment) {
alert("Payement effectué");
});
}
}, '#paypal-button');
AJAX :
function getDivPrice() {
var price = 0;
var actual_league = document.getElementById("actual_league").value;
var actual_division = document.getElementById("actual_division").value;
var desired_league = document.getElementById("desired_league").value;
var desired_division = document.getElementById("desired_division").value;
var dataString = 'type=division&actual_league=' + actual_league +
"&actual_division=" + actual_division + "&desired_league=" + desired_league +
"&desired_division=" + desired_division;
$.ajax({
type: 'POST',
data: dataString,
url: '/FoxBoost/assets/getprice.php',
success: function (data) {
var duoqstr = "";
if (document.getElementById('order-duo').checked)
{
data = data * 1.3;
duoqstr = " en Duo"
data = data.toFixed(2);
}
if(data == 0)
{
document.getElementById('boost_price').innerHTML = "";
document.getElementById('division_infos').innerHTML = "Ce boost n'est pas possible.";
document.getElementById('hidden_price').value = data;
}else{
document.getElementById('boost_price').innerHTML = data + " €";
document.getElementById('division_infos').innerHTML = actual_league + " " + actual_division + " " + "->" + " " + desired_league + " " + desired_division + duoqstr;
document.getElementById('hidden_price').value = data;
}
}
});
}
getPrice.php
<?php
$tiers = array(
"Bronze 5" => 0,
"Bronze 4" => 1,
"Bronze 3" => 2,
"Bronze 2" => 3,
"Bronze 1" => 4,
"Silver 5" => 5,
"Silver 4" => 6,
"Silver 3" => 7,
"Silver 2" => 8,
"Silver 1" => 9,
"Gold 5" => 10,
"Gold 4" => 11,
"Gold 3" => 12,
"Gold 2" => 13,
"Gold 1" => 14,
"Platinum 5" => 15,
"Platinum 4" => 16,
"Platinum 3" => 17,
"Platinum 2" => 18,
"Platinum 1" => 19,
"Diamond 5" => 20,
"Diamond 4" => 21,
"Diamond 3" => 22,
"Diamond 2" => 23,
"Diamond 1" => 24
);
$costs = array(
10,10,10,10,12,
12,13,14,15,18,
18,20,22,24,28,
30,33,36,39,45,
65,75,85,125
);
if($_POST['actual_league'] != null && $_POST['actual_division'] != null && $_POST['desired_league'] != null && $_POST['desired_division'] != null) {
$actual = $_POST['actual_league']." ".$_POST["actual_division"];
$desired = $_POST['desired_league']." ".$_POST["desired_division"];
foreach($tiers as $index => $key) {
if($actual === $index) {
$actual = $key;
}
if($desired === $index) {
$desired = $key;
}
}
$price = 0;
if ($actual < $desired) {
for ($i = $actual ; $i < $desired ; $i++) {
$price += $costs[$i];
}
echo $price;
}else{
echo $price;
}
}else{
header('Location: /foxboost');
}
?>

Angular ng-option filtering with a condition

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>