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

Isn't ajax a form of jquery? Google certainly seems to think so. — Sweepster, Jun 24 '16 at 21:27
Right, the intention is to have ajax fire to fetch the images from the DB,,, For the moment i'm using placeholders through CSS. The final idea is that the array would populate out of the DB. The array would then populate the drop down and the user would select an option out of the array to display an image. For the sake of this issue however, I just need help figuring out how to reduce the coding into loops for the html and the jquery. — Sweepster, Jun 24 '16 at 21:35
No worries, i understand what you mean. For the time being, then, I removed the AJAX tag from this question since that part is omitted, and hopefully I have provided a possible solution to your loop question. (See answer below) — cssyphus, Jun 24 '16 at 21:40

score 1 · Answer 1 · edited May 23 '17 at 12:16

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>

Right, I missed the first part. Is it possible to do that in PHP as you build the page? Or do you need to do that *after* the page was initially loaded? — cssyphus, Jun 24 '16 at 21:42
It can absolutely be done in php but I don't know how to go from javascript to php (or rather, php to javascript) to make it happen. The options array is planned to be populated from a mysql database. — Sweepster, Jun 24 '16 at 21:44
[Here is an example](http://stackoverflow.com/questions/16924082/dynamic-drop-down-box/16924652#16924652) that shows you how to loop through returned values and build code *behind the scenes, as it were* and plonk it into your page. This example does it in response to an AJAX call, but you can also do it up front as the page is being build (sole difference being that the code would appear within `` PHP tags within **index.php** (for e.g.) rather than in a separate AJAX processor PHP doc **file2.php** or whatever the ajax doc is called.) — cssyphus, Jun 24 '16 at 21:45

user5200704 · Answer 2 · 2016-06-24T22:25:35.603

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>

The script beings by displaying all the color divs outright before making a selection. Once a selection is made, it functions properly. It also doesn't solve the repetitive html for the divs themselves. — Sweepster, Jun 24 '16 at 22:18
what you want box is also will be not repetitive? Can you explain me what do you want to do ? I think you have one script code to add more colors and background there are not need to add css background color. — user5200704, Jun 24 '16 at 22:28
div box have also different element like image so it will be change on every box. I was not sure what is complete format of box content. What is every box will have "You have selected red[daynamic] option so i am here [daynamic]" — user5200704, Jun 24 '16 at 22:46

Make Ajax & HTML (code-side) Dropdown Dynamic

2 Answers2