javascript和html图像下拉列表

我希望我能正确理解你的问题。。。我为你做的。

/*the only js is to continuously checking the value of the dropdown. for posterity*/
var j = setInterval(function(){$("#trace").val($("input[name=line-style]:checked").val());},100);
var container = document.getElementById('image-dropdown');
for(var i=1;i<7;i++)
{
	var input = document.createElement('input');
  input.type = "radio";
  input.name = "line-style";
  input.value = ""+i;
  input.id = "line"+i;
  if(i==1)
  	input.checked = true;
	container.appendChild(input);
	
  var label = document.createElement('label')
	label.htmlFor = "line"+i;
  label.style.backgroundImage = "url('https://media.playstation.com/is/image/SCEA/ps4-system-imageblock-vs-us-19jun15?$TwoColumn_Image$')";
  label.style.backgroundSize = "100px 100px";
  label.style.backgroundRepeat = "no-repeat";
  container.appendChild(label);
  
}
var container = document.getElementById('image-dropdown2');
for(var i=1;i<7;i++)
{
	var input = document.createElement('input');
  input.type = "radio";
  input.name = "line-style";
  input.value = ""+i;
  input.id = "line"+i;
  if(i==1)
  	input.checked = true;
	container.appendChild(input);
	
  var label = document.createElement('label')
	label.htmlFor = "line"+i;
  label.style.backgroundImage = "url('https://media.playstation.com/is/image/SCEA/ps4-system-imageblock-vs-us-19jun15?$TwoColumn_Image$')";
  label.style.backgroundSize = "100px 100px";
  label.style.backgroundRepeat = "no-repeat";
  container.appendChild(label);
  
}

/*o.v.*/
.image-dropdown {
    /*style the "box" in its minimzed state*/
    border:1px solid black; width:200px; height:100px;
    /*animate collapsing the dropdown from open to closed state (v. fast)*/
    -moz-transition: height 0.1s; 
    -webkit-transition: height 0.1s; 
    -ms-transition: height 0.1s;  
    -o-transition: height 0.1s;  
    transition: height 0.1s;
}
.image-dropdown:hover {
    /*when expanded, the dropdown will get native means of scrolling*/
    height:200px; overflow-y:scroll;
    /*nice and smooth expand - speed this up at your preference or remove animation altogether*/
    -moz-transition: height 0.5s; 
    -webkit-transition: height 0.5s; 
    -ms-transition: height 0.5s;  
    -o-transition: height 0.5s;  
    transition: height 0.5s;
 
    
}
.image-dropdown input {
    /*hide the nasty default radio buttons. like, completely!*/
    position:absolute;top:0;left:0;opacity:0;
}
#image-dropdown{
background-image: url("https://media.playstation.com/is/image/SCEA/ps4-system-imageblock-vs-us-19jun15?$TwoColumn_Image$");
 background-size: 100px 100px;
 background-repeat: no-repeat;
 background-position: center; 
}
#image-dropdown:hover {
  background-image:none;
}
.image-dropdown label {
    /*style the labels to look like dropdown options, kinda*/
    display:none; margin:0px; height:100px; opacity:0.2; 
    /*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
    background:url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;}
.image-dropdown:hover label{
    /*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/
    display:block;
}
.image-dropdown label:hover {
    opacity:0.5;
}
.image-dropdown input:checked + label {
    /*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/
    opacity:1 !important; display:block;
}
/*pfft, nothing as cool here, just the value trace*/
#trace {margin:0 0 20px;}

<input type="hidden" value="" id="trace"/>
<div id="image-dropdown" class="image-dropdown" >
</div>
<div id="image-dropdown2" class="image-dropdown" >
</div>

希望它好：）