将菜单列表选项的值设置为另一个选择选项

Question

我希望在从菜单列表中选择一个值时，该值将分配给select选项。

我的菜单列表如下：

<ul class="list-group" id="myUL">
  <li><a href="#">Garden</a>
      <ul>
         <li><a id="center_1" value="tree_1">Tree 1</a></li>
         <li><a id="center_2" value="tree_2">Tree 2</a></li>
         <li><a id="center_3" value="tree_3">Tree 3</a></li>           
      </ul>
  </li>
  ......
</ul>

在选择Tree 1之后，它的值将被分配给这个select option

<select class="form-control">
    <option id="output">'selected value'</option>
</select>

如果在选项中选择的值是Tree 1，那么第二个选项将显示它的子值。

也许像这样(插图)：

​

​

Answer 1

​

$(document).ready(function(){
        var column1RelArray = [];

        $('#column1 li').each(function() {
           column1RelArray.push($(this).text());
        });



        $.each(column1RelArray, function( index, menuItem ) {


            var optionExists = ($('#columnsAvailable option[value='+menuItem+']').length > 0);

            if(!optionExists)
            {
                $('#columnsAvailable').append("<option value='"+menuItem+"'>"+menuItem+"</option>");
            }

        });


    });

<li>
    <a href="#">Garden</a>
    <ul id="column1">
        <li>Tree 1</li>
        <li>Tree 2</li>
        <li>Tree 3</li>
    </ul>
</li>

<select class="form-control" id="columnsAvailable">
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

​

首先，在选中框中添加一些ID

<select class="form-control" id="columnsAvailable">

我认为您也必须使用jQuery，所以在将值附加到复选框之前，您需要检查该值是否存在。

检查下面的代码

var menuItem = "Tree1";

var optionExists = ($('#columnsAvailable option[value='+menuItem+']').length > 0);

if(!optionExists)
{
    $('#columnsAvailable').append("<option value='"+menuItem+"'>"+menuItem+"</option>");
}

使用var menuItem = "Tree1";，您可以使用自己想要的值，如果您希望从单击事件或任何方式获得

Answer 2

你可以很容易地用vanila js做这件事。只需在第一个select选项上添加一个onchange，这意味着当您从第一个select中选择某项内容时，onchange将被激发，其结果将显示第二个select选项。就这样!！这肯定能解决你的问题。

​

let select2=document.getElementById("select2")
let show=()=>{
    select2.style.visibility="visible"
}

<select id="select1" onchange="show()">
    <option id="center_1" class="center" value="tree_1">Tree 1</option>
    <option id="center_2" class="center" value="tree_2">Tree 2</option>
    <option id="center_3" class="center" value="tree_3">Tree 3</option>           
</select>
<select id="select2" style="visibility: hidden">
    <option value="apple">apple</option>
    <option value="orange">orange</option>
    <option value="banana">banana</option>
</select>

​