使用语义用户界面的动态下拉菜单

本教程将介绍使用语义用户界面的动态下拉菜单的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

使用语义用户界面的动态下拉菜单 教程 第1张

问题描述

在语义用户界面下拉菜单中遇到问题。我一直在使用语义-UI,并希望动态更改下拉项。也就是说,当我从第一个下拉列表中选择值时,第二个下拉列表的项不会得到反映。

以下是代码片段:

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

$(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://www.qumuban.com/redirect/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS88YSBocmVmPQ==" target="_blank"https://www.qumuban.com/tag/semantic-ui" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 semantic-ui 的文章" target="_blank">semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://www.qumuban.com/redirect/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS88YSBocmVmPQ==" target="_blank"https://www.qumuban.com/tag/semantic-ui" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 semantic-ui 的文章" target="_blank">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>

推荐答案

语法错误

您正在string中换行,请使用+运算符正确换行,这样您的脚本就不会发现语法错误,因此您的代码应该可以运行。

第二个下拉列表

关于第二个下拉列表。你一定漏掉了什么。看看第一个下拉DOM结构。父元素#programmetype具有要应用的类ui selection dropdown select-language

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

此外,您还需要一个隐藏的input来保存您遗漏的数据。但它是为第一个下拉菜单准备的。检查代码段,我已添加它们。

希望这能有所帮助。

检查下面的代码片段:

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

$(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://www.qumuban.com/redirect/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS88YSBocmVmPQ==" target="_blank"https://www.qumuban.com/tag/semantic-ui" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 semantic-ui 的文章" target="_blank">semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://www.qumuban.com/redirect/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS88YSBocmVmPQ==" target="_blank"https://www.qumuban.com/tag/semantic-ui" class="tag-tooltip" data-toggle="tooltip" title="查看更多关于 semantic-ui 的文章" target="_blank">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>

好了关于使用语义用户界面的动态下拉菜单的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。