javascript-使用语义ui的动态下拉列表

在语义UI下拉菜单中遇到问题.我一直在使用Semantic-Ui,并想动态更改下拉菜单项.也就是说,当我从第一个下拉列表中选择值时,第二个下拉列表的项目未得到反映.

这是代码片段：

$(document).ready(function() {
  $("#programmetype").dropdown({
    onChange: function() {

      $('#servicetype').html(
        '<div class="ui selection dropdown select- 
        language ">'+'<div class="
        text ">Choose..</div>'+'<i class="
        dropdown icon "></i>'+' <div class="
        menu ">'+


        '<div class="item" data-value="acp">ACP</div>' +
        '<div class="item" data- 
        value = "art" > ART < /div>'+'</div > '+' < /div>'
      );
      $('#servicetype').dropdown();
    }

  });
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>


<div id="programmetype" class="ui selection dropdown select- 
        language">
  <input type="hidden" name="programmetype">
  <div class="text">Choose..</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="val1">Car</div>
    <div class="item" data-value="val2">Tank</div>
    <div class="item" data-value="val3">Plane</div>
  </div>
</div>

<div id="servicetype"></div>

最佳答案

语法错误

您正在字符串内换行,使用运算符正确地换行,并且脚本找不到语法错误,因此您的代码应运行.

第二个下拉菜单

关于第二个下拉列表.你错过了一些东西.查看第一个下拉DOM结构.父元素#programmetype具有用于选择CSS的ui选择下拉列表select-language类.

但是对于#servicetype,您没有这些类,也从未添加过这些类,因此在第一个下拉列表的onChange中,添加这些类,(检查脚本)

另外,您需要隐藏输入来保存丢失的数据.但这是第一个下拉列表.检查代码段,我已经添加了它们.

希望这可以帮助.

检查以下代码段：

$(document).ready(function() {
  $("#programmetype").dropdown({
    onChange: function() {

      $('#servicetype').addClass('ui selection dropdown select-language'); // add these classes for the UI.
      $('#servicetype').html(
        '<input type="hidden" name="servicetype">' // you need a hidden input and the rest is fine
        +'<div class="text">Choose..</div>'
        +'<i class="dropdown icon "></i>'
        +'<div class="menu">'
        +'<div class="item" data-value="acp">ACP</div>'
        +'<div class="item" data-value="art"> ART</div>'
        +'</div>'
        +'</div>'
      );
      $('#servicetype').dropdown();
    }

  });
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>


<div id="programmetype" class="ui selection dropdown select-language">
  <input type="hidden" name="programmetype">
  <div class="text">Choose..</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="val1">Car</div>
    <div class="item" data-value="val2">Tank</div>
    <div class="item" data-value="val3">Plane</div>
  </div>
</div>

<div id="servicetype"></div>

原文链接：https://www.f2er.com/html/530526.html

javascript-使用语义ui的动态下拉列表

猜你在找的HTML相关文章