制作Ajax &HTML(代码端)动态下拉菜单

Make Ajax & HTML (code-side) Dropdown Dynamic

本文关键字：动态 下拉菜单 代码 Ajax HTML 制作      更新时间：2023-09-26

所以我有这个脚本，输出一个下拉菜单，用一个新的颜色和图像刷新。boxdiv。

HTML,Java: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div>
  <select id="color">
    <option style="display: none;">Choose Color</option>
  </select>
</div>
<div class="red box">You have selected <strong>red option</strong> so i am here
  <img src="http://i46.tinypic.com/2epim8j.jpg" />
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here
  <img src="http://i49.tinypic.com/28vepvr.jpg" />
</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here
  <img src="http://i50.tinypic.com/f0ud01.jpg" />
</div>
<script>
$(document).ready(function() {
  $("select").change(function() {
    $("select option:selected").each(function() {
      if ($(this).attr("value") == "Red") {
        $(".box").hide();
        $(".red").show();
      }
      if ($(this).attr("value") == "Green") {
        $(".box").hide();
        $(".green").show();
      }
      if ($(this).attr("value") == "Blue") {
        $(".box").hide();
        $(".blue").show();
      }
    });
  }).change();
});
var select = document.getElementById("color");
var options = ["Red", "Blue", "Green"];
for(var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
    }
</script>
CSS: 

.box {
  padding: 20px;
  display: none;
  margin-top: 20px;
  border: 1px solid #000;
}
.box img {
  float: right;
  width: 150px;
  height: 100px;
}
.red {
  background: #ff0000;
}
.green {
  background: #00ff00;
}
.blue {
  background: #0000ff;
}

一切都运行得很好。

问题是，我想将其扩展到大约100个字段，手动这样做既累人又低效(尽管CSS可能是手动的)。

所以我想做的是让我的脚本更动态，通过允许我创建一个颜色一次(在我建立的选项数组)，然后html和javascript将循环通过它来显示他们的动作。

那么我想我的第一个问题是我怎么能把我的html块，并把它变成一个循环，通过我的选项数组?

其次，我如何使用我的选项数组来简化我的代码?

谢谢

这个答案可以让你从第一个问题开始。

第二，你在想这样的事情吗?

/*  javascript/jQuery  */
$("select").change(function() {
    var sel = this.value;
    $('.box').hide();
    $('.'+sel).show();
});
var select = document.getElementById("color");
var options = ["red", "blue", "green"];
for(var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
}
/*  CSS:  */
.box {
  padding: 20px;
  display: none;
  margin-top: 20px;
  border: 1px solid #000;
}
.box img {
  float: right;
  width: 150px;
  height: 100px;
}
.red {
  background: #ff0000;
}
.green {
  background: #00ff00;
}
.blue {
  background: #0000ff;
}
<!--  HTML:  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <div>
      <select id="color">
        <option style="display: none;">Choose Color</option>
      </select>
    </div>
    <div class="red box">You have selected <strong>red option</strong> so i am here
      <img src="http://i46.tinypic.com/2epim8j.jpg" />
    </div>
    <div class="green box">You have selected <strong>green option</strong> so i am here
      <img src="http://i49.tinypic.com/28vepvr.jpg" />
    </div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here
      <img src="http://i50.tinypic.com/f0ud01.jpg" />
    </div>

尝试添加更多动态颜色和背景框

var ColorBox ={
  colors: ['Red', 'Black'],
  init: function(){
     this.addColor();
     $('select#color').change(this.boxDisplay);
  
  },
  
  boxDisplay: function(){
    var color = $(this).val();
    $('.box').hide();
    $('.'+color).show().boxbackground(color);
  },
  
  addColor: function(){
     $.each( this.colors, function( idx, color ) {
       $('select#color').append( $('<option>',{
        value : color.toLowerCase(),
        text: color
       }))
     
     })
  }
};
$.fn.boxbackground = function( colorname ){
  elem = $(this);
  var colorcode;
  switch( colorname ){
     case 'red' : colorcode = '#FF4D49'; break;
     case 'black' : colorcode = '#000'; break;
  }
  
  elem.each( function(){
    $(this).css( 'background', colorcode );
  
  })
};
ColorBox.init();
.box {
  padding: 20px;
  display: none;
  margin-top: 20px;
  border: 1px solid #000;
}
.box img {
  float: right;
  width: 150px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="color">
    <option style="display: none;">Choose Color</option>
  </select>
</div>
<div class="red box">You have selected <strong>red option</strong> so i am here
  <img src="http://i46.tinypic.com/2epim8j.jpg" />
</div>
<div class="black box">You have selected <strong>black option</strong> so i am here
  <img src="http://i46.tinypic.com/2epim8j.jpg" />
</div>

相关文章：