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

Question

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

我的菜单列表是这样的：

<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

您可以使用 vanila js 轻松完成此操作。只需在第一个选择选项上添加一个 onchange eventlistner ，这意味着当您从第一个选择中选择某些内容时，将触发 onchange 事件并导致出现第二个选择选项。而已 ！！这肯定会解决你的问题。

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>

Answer 2

$(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";，您可以使用自己的值来获取点击事件或任何您希望的值