In my example, there is two select tag where if I click any option from the first select then it's corresponding options will be shown in second select. My requirement is to set color in the options of all select while user will click(eg: green) on any. And if the user click on any selected option then that color will be gone(white). That means a toggle of color regarding selection(also any appearance of tick mark also acceptable). I have thought it because it will give the user a tracking on the basis of the color while right no there is no opportunity like that.
A combination I am writing here(This toggle color is only for the second select):
If I rewrite the steps(I am thinking to modufy the post by the following lines):
STEP_1: user chosen 0001_Summer and automatically row_heat_0 is selected(I don't know how to disable this. if can disable it also a good leap) and color will be green for this option.
STEP_2: if user again click on row_heat_0 the color will turn to white(that means not selected).
STEP_3: if user now click on row_heat_1 the color will turn to green for this option.
STEP_4: if user now click on row_heat_0 the color will turn to green for this option as well. Now if user select All then that option will be in green color So, in this stage there is 2 option is green in second select and they are row_heat_0, row_heat_1 and All. Also in the first select one option is green and that is 0001_Summer.
STEP_5: if user now change the first select option to 0003_Spring and do some select/not_select operation also same affect will be seen.
STEP_6: if user turn to 0001_Summer still the seleted will be seen in green color(row_heat_0, row_heat_1, All).
I have tried this but failed to see any change.
I am giving teh whole code where I want to apply it
data = {
"0001_Summer": {
"param": [
"Select_Param",
"row_heat_0",
"row_heat_1",
"row_heat_2",
"row_heat_3",
"row_heat_4",
"row_heat_5",
"row_heat_6",
"All"
],
"value": [
"Select_Param",
"value_00",
"value_01",
"value_02",
"value_03",
"value_04",
"value_05",
"value_06",
"All"
]
},
"0002_Winter": {
"param": [
"Select_Param",
"row_cloud_0",
"row_cloud_1",
"row_cloud_2",
"row_cloud_3",
"row_cloud_4",
"row_cloud_5",
"row_cloud_6",
"row_cloud_7",
"row_cloud_8",
"All"
],
"value": [
"Select_Param",
"value_00",
"value_01",
"value_02",
"value_03",
"value_04",
"value_05",
"value_06",
"value_07",
"value_08",
"All"
]
},
"0003_Spring": {
"param": [
"Select_Param",
"row_color_0",
"row_color_1",
"row_color_2",
"row_color_3",
"row_color_4",
"All"
],
"value": [
"Select_Param",
"value_00",
"value_01",
"value_02",
"value_03",
"value_04",
"All"
]
},
"0004_Autumn": {
"param": [
"Select_Param",
"dev_x_0",
"dev_x_1",
"dev_x_2",
"dev_x_3",
"All"
],
"value": [
"Select_Param",
"value_00",
"value_01",
"value_02",
"value_03",
"All"
]
}
}
function make_option_1(data, select, value, value_1 = null) {
option = $("<option>")
.attr({
text: data,
value: value,
value_1: value_1
}).html(data);
select.append(option);
}
let temp_json = [];
let json_for_backend = {};
function make_dropdown_1(data) {
var select_device = document.getElementById("device_n");
var select_name = document.getElementById("name_n");
var jqr_select_device = $(select_device);
var jqr_select_name = $(select_name);
for (let a in data) {
make_option_1(a, jqr_select_device, a);
for (let b = 0; b < Object.keys(data[a]["param"]).length; b++) {
make_option_1(data[a]["param"][b], jqr_select_name, a, b);
}
}
$("#device_n").trigger('change') //call first select
}
$("#device_n").change(function() {
var id = $(this).val();
let init_name_n_val = $("#name_n option:selected").val();
$("#name_n option").hide() //hide all options
$("#name_n option[value='" + id + "']").show(); //show options where value matches
$("#name_n option[value_1=0][value='" + id + "']").prop('selected', true); //set second value selected
if($(this).val() == "select device"){
$("#name_n").val("select parameter");
}
else{
$("#name_n").trigger('change'); //call second select
}
});
$("#name_n").change(function() {
var values = $("#device_n").val();
let name_n_option_text = $( "#name_n option:selected").text();
let name_n_option_index = data[values]["param"].indexOf(name_n_option_text);
let updated_value = data[values]["value"][name_n_option_index];
let value_key = "value";
if (updated_value != "Select_Param") {
create_json_for_backend(values, value_key, updated_value);
}
});
make_dropdown_1(data);
function create_json_for_backend(main_key,value_key, updated_value){
if (!json_for_backend.hasOwnProperty(main_key))
{
var value_temp_json = {};
var value_temp_list = [];
value_temp_list.push(updated_value);
value_temp_json[String(value_key)] = value_temp_list;
json_for_backend[String(main_key)] = value_temp_json;
}
else{
if(!json_for_backend[main_key][value_key].includes(updated_value)){
json_for_backend[main_key][value_key].push(updated_value);
}
}
}
let input = $("<input>")
.attr("id", "id_for_input")
.attr('type', 'number')
.attr('name', 'value')
.attr('placeholder','query')
.addClass("all_input_class");
submit_button = $("<button>")
.addClass("class_for_submit")
.text('Submit')
.click(function() {
var inputVal = document.getElementById("id_for_input").value;
json_for_backend["Query"] = inputVal;
console.log(json_for_backend);
});
let get_div = document.getElementsByClassName("container");
let get_div_jquery = $(get_div);
get_div_jquery.append(input, submit_button);<!DOCTYPE html>
<html lang="en">
<head>
<title>JSON Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body id="body" style="margin-top: 0">
<div class="container" style="margin-top:100px;">
<label for="combination">make combination:</label>
<select name="device_n" id="device_n" init_text = "ini">
<option selected="selected" class="grey_color" >select device</option>
</select>
<select name="name_n" id="name_n" init_text = "ini">
<option selected="selected" class="grey_color" >select parameter</option>
</select>
</div>
</body>
</html>So, finally I can again repeat that I need an idea to design a system where user can click on any option and it will toggle the color of that option(also any appearance of tick mark also acceptable).
I found the combination I have given in the upper part is not that much understandable so I am adding here few lines
I am trying to clarify more. Considergreencolor astick mark(just for clarifying). User can select multiple option then tick markwill appear in those selected options. If user again click on any seletced option where alreadytick markis appeared then thattick markwill be gone. Just now, replacetick markwith thegreen colorand disappearance oftick markwithwhite color. That means user can see which options are selected by seeing the tick markor acolor. Eg: 0001_Summerselected and then selectedrow_heat_0and ,row_heat_0androw_heat_2that means user will see these 3 options hasgreencolor. Then if user again click onrow_heat_1then this option will be white and user will seerow_heat_0androw_heat_2aregreennow. user will now choose0002_Winter and select some options there(eg: row_cloud_0, row_cloud_1, row_cloud_4) and all those 3 options will be green. if Now user again choose 0001_Summerthe optionsrow_heat_0androw_heat_2are still green. That means a feeling of tracking user can have.
