Make Ajax & HTML (code-side) Dropdown Dynamic

Question

So I have this script that outputs a drop down menu and refreshes the .box div with a new color and image.

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;
}

It all works beautifully.

Thing is, I want to scale this up into roughly 100 fields and doing so manually is both exhausting and inefficient (though the CSS will probably be manual).

So what I want to do is make my script more dynamic, by allowing me to create a color once (in my established options array) and then the html and javascript would loop through it to display their actions.

So then I guess my first question is how can I take my html chunk and turn it into a loop that goes through my options array?

Secondly, how can I take my options array to get my code simplified?

Thank you

Answer 1

Try this add more dyanamic colors and background box

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>

Answer 2

This other answer will get you started on the first question.

For the second, are you thinking of something like this?

/*  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>