Question

我有嵌套下拉列表，我想在第二个下拉列表中为每个项目添加this之类的缩略图。此外，我希望缩略图正确对齐

HTML

<div align ="center">
<form name="doublecombo">
<p>

<label><b>SELECT TYPE</b>
<select name="example" size="1" class="selectpicker text-left"      onchange="redirect(this.options.selectedIndex)">
<option />Education
<option />Weather</select></label>


<label><b> SELECT </b><select name="stage2" size="1" id="selectpickerid"  class="selectpicker text-left" dir="ltr">
<option value="http://www.xxxabc.com/p/coursera.html" />Coursera
<option value="http://www.xxxabc.com/p/udemy.html" />Udemy
<option value="http://www.xxxabc.com/p/lynda.html" />Lynda

</select></label>
<input type="button" id="submitbutton" name="test" value="xxxabc!"  
onclick="go()" />
</p></form></div>

的Javascript

<script>

 $('.selectpicker').selectpicker({
     style: 'btn-inverse',
     size: 8
 });

 $('.selectpicker').on('change', function () {
     var opValue = $(this).val();
     console.log(opValue);
     $('#selectpickerid').val(opValue);
     $('.selectpicker').selectpicker('refresh');
 });




var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("Coursera","http://www.xxxabc.com/p/coursera.html")
group[0][1]=new Option("Udemy","http://www.xxxabc.com/p/udemy.html")
group[0][2]=new Option("Lynda","http://www.xxxabc.com/p/lynda.html")

group[1][0]=new Option("1Weather:Widget Forecast Radar","http://www.xxxabc.com/p/1weatherwidget-forecast-radar.html")
group[1][1]=new Option("The Weather Channel","http://www.xxxabc.com/p/the-weather-channel.html")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}

https://jsfiddle.net/Usery5858/os3c0t8L/2/

将缩略图添加到Array Elements

0 个答案: