Ausgewählte Dropdown-Listendaten dynamisch anzeigen-js-Tutorial-php.cn

Ausgewählte Dropdown-Listendaten dynamisch anzeigen

php中世界最好的语言

Freigeben： 2018-03-23 15:32:38

Original

3186 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen die dynamische Anzeige ausgewählter Dropdown-Listendaten . Was sind die Vorsichtsmaßnahmen für die dynamische Anzeige ausgewählter Dropdown-Listendaten? , lass uns einen Blick darauf werfen.

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net jQuery动态显示表单</title>
  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
    //数据集
    var schools = [
      { 'id': 1, 'name': '南京大学' },
      { 'id': 2, 'name': '北京大学' },
      { 'id': 3, 'name': '浙江大学' },
      { 'id': 4, 'name': '清华大学' },
      { 'id': 5, 'name': '湖南大学' },
    ];
    //页面加载运行，将数据集绑定select，显示默认选中学校
    $(function () {
      bindSelect();
      $('#info').text($('#schoolSelect').val());
    });
    //将数据集绑定select，重新选择学校后显示选中学校
    bindSelect = function () {
      var $schoolSelect = $('#schoolSelect');
      $schoolSelect.change(function () {
        $('#info').text($(this).val());
      });
      if (schools.length > 0) {
        for (var i = 0; i < schools.length; i++) {
          var item = schools[i];
          if (item.id == 2) {
            $schoolSelect.append(&#39;<option value="&#39; + item.id + &#39;" selected>' + item.name + '</option>');
          } else {
            $schoolSelect.append('<option value="&#39; + item.id + &#39;">' + item.name + '</option>');
          }
        }
      }
    }
  </script>
</head>
<body>
  <form>
    <select id="schoolSelect">
    </select>
    <label id="info"></label>
  </form>
</body>
</html>

Nach dem Login kopieren

Ich glaube dir Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Probleme beim statischen Vue-Ressourcenpaketieren

Detaillierte Erläuterung der Verwendung von Async und Wait

So verwenden Sie Echarts in Vue.JS

Das obige ist der detaillierte Inhalt vonAusgewählte Dropdown-Listendaten dynamisch anzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!