Блог

Я хочу создать следующее:

1. Когда пользователь нажимает на кнопку, создается новый раскрывающийся список.
2. Когда пользователь выбирает опцию из этого раскрывающегося списка, второй раскрывающийся список создается / обновляется на основе выбранного значения.

Пример использования:

Проект позволяет пользователю указать, какой алгоритм использовать. С помощью различных алгоритмов я хочу, чтобы пользователь мог выбирать параметры. Поэтому пользователь нажимает кнопку, чтобы показать, что он хочет выбрать новый параметр. В раскрывающемся списке отображаются все возможные параметры, а затем, когда они выбирают один, во втором раскрывающемся списке отображаются все возможные значения для этого выбранного параметра.

Мне нужно, чтобы они могли добавлять столько пар параметров / значений, сколько пожелают. Я также хотел бы знать, как правильно получить доступ к каждой паре данных после.

У меня есть кости, которые работают (я думаю), но не полностью. Любая помощь будет признательна.

Это то, что у меня есть до сих пор. ( См.: JSFiddle)

HTML

 <div id="banner-message">
  <div>
    <button id="selectParam">New Parameter</button>
  </div>
  <div class="row">
    <div id="newParamName"></div>
    <div id="newParamValue"></div>
  </div>
</div>
 

JS

 document.getElementById('selectParam').onclick = function () {

    // Get the parameters for the chosen algorithm
    params = getParameters("Algo_A")

    // get the names of the parameters
    var name = Object.keys(params);

    // Create a new Select Element and set the name and ID value
    var param = document.createElement("select");
    param.name = "paramName";
    param.id   = "paramName";

    // Add each parameter as a option for the selection
    for (const val of name) {
        var option = document.createElement("option");
        option.value = val;
        option.text  = val;
        param.appendChild(option);
    }

    // Add the new selection dropdown to the  
    document.getElementById("newParamName").appendChild(param)
}

// When the user clicks on the created selection dropdown
document.getElementById('newParamName').onclick = function () {

    // Get the parameters for the chosen algorithm
    params = getParameters("Algo_A")

    // Determines what parameter was chosen from the dropdown
    var param = document.getElementById('paramName').value
    // Determines the possible values for that parameter
    var values = params[param]

    // Creates a new selection dropdown with these new values as possible options
    var paramValue = document.createElement("select");
    paramValue.name = "paramValue";
    paramValue.id = "paramValue";

    for (const val of values) {
        var option1 = document.createElement("option");
        option1.value = val;
        option1.text = val;
        paramValue.appendChild(option1);
    }

    // Appends the dropdown to the page
    document.getElementById("newParamValue").appendChild(paramValue)
}

function getParameters(projType) {
    params = {}

    if (projType == 'Algo_A') {
        params.param_a = ['a1', 'a2', 'a3', 'a4']
        params.param_b = ['b1', 'b2', 'b3', 'b4']
        params.param_c = ['c1', 'c2', 'c3', 'c4']
        params.param_d = ['d1', 'd2', 'd3', 'd4']
    }

    return params
}

 

Я разработал решение

JS Скрипка

HTML

 <div id="banner-message">

  <div>
    <button id="selectParam" onclick="createDropdown1()">New Parameter</button>
  </div>
  <div class="row" id="parent-item">
    <div class='col-6' id="newParamName" ></div>
    <div class='col-6' id="newParamValue"></div>
  </div>
</div>
 

JS

 var idx = 0

function createDropdown1() {

        // Determine the parameters for the chosen algorithm (in this example, only algo A is available)
    params = getParameters("A")

        // Get the names of the paramters
    var name = Object.keys(params);

        // Create a Select (dropdown) for chosing the parameters
    var param = document.createElement("select");
    param.name = "paramName-"   idx;
    param.id   = "paramName-"   idx;
    param.onchange = function() { updateValueDropdown(this.value) }

        // For each paramter that we have, create an option in the dropdown
    for (const val of name) {
        var option = document.createElement("option");
        option.value = val;
        option.text = val;
        param.appendChild(option);
    }

        // Once created, append to the div
    document.getElementById("newParamName").appendChild(param)
    
    var value = document.createElement("select");
    value.name = "paramValue-"   idx;
    value.id   = "paramValue-"   idx;
    value.onchange = function() { changeValue(this.value) }
    
    idx  = 1

        // Create a blank option in the dropdown
    var option = document.createElement("option");
    option.value = '--';
    option.text  = '--';
    value.appendChild(option);

        // Once created, append to the div
    document.getElementById("newParamValue").appendChild(value)
}

var param_id
var value_id

// Get the element, add a click listener...
document.getElementById("parent-item").addEventListener("click", function(e) {

    if(e.target amp;amp; e.target.id.includes("paramName")) {
      param_id = e.target.id.replace("paramName-", "")
    }
  
  if(e.target amp;amp; e.target.id.includes("paramValue")) {
      value_id = e.target.id.replace("paramValue-", "")
    }
  
});

// When the user has changed the parameter, update the second dropdown
function updateValueDropdown(param) {

    params = getParameters("A")
    var values = params[param]

    var paramValue = document.getElementById("paramValue-"   param_id)
    
    paramValue.options.length = 0;

    for (const val of values) {
        var option1 = document.createElement("option");
        option1.value = val;
        option1.text = val;
        paramValue.add(option1);
    }
}
function changeValue(value) {

   var e = document.getElementById("paramName-"   param_id);
   var strUser = e.value;
   
  console.log(
  "Dropdown group: "   value_id   
  ", Parameter: "   strUser   
  ", Value: "   value)
}


function getParameters(projType) {
    params = {}

    if (projType == 'A') {
        params['aa'] = ['a1', 'a2', 'a3', 'a4']
        params['bb'] = ['b1', 'b2', 'b3', 'b4']
        params['cc'] = ['c1', 'c2', 'c3', 'c4']
        params['dd'] = ['d1', 'd2', 'd3', 'd4']
    }

    return params
}

 

CSS

 body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}