javascriptとhtml image-dropdown

Question

イメージドロップダウンが2つあります。各ドロップダウンボックスに2つのイメージの代わりに1つのイメージしか表示できません。どうやってやるの？またはライブラリ/プラグインがあります

php/javascript/jqueryは私には適しています、ありがとうございます。

http://jsfiddle.net/NDCSR/580/

HTML：

<input type="hidden" value="" id="trace"/> 

<div id="image-dropdown" class="image-dropdown" > 
</div> 

<div id="image-dropdown2" class="image-dropdown" > 
</div> 

CSS：

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

JAVASCRIPT：

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

} 

Answer 1

私はあなたの質問を正しく理解することを願って... 私はあなたのためにそれを作った。

/*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++) 
 
{ 
 
\t var input = document.createElement('input'); 
 
    input.type = "radio"; 
 
    input.name = "line-style"; 
 
    input.value = ""+i; 
 
    input.id = "line"+i; 
 
    if(i==1) 
 
    \t input.checked = true; 
 
\t container.appendChild(input); 
 
\t 
 
    var label = document.createElement('label') 
 
\t 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++) 
 
{ 
 
\t var input = document.createElement('input'); 
 
    input.type = "radio"; 
 
    input.name = "line-style"; 
 
    input.value = ""+i; 
 
    input.id = "line"+i; 
 
    if(i==1) 
 
    \t input.checked = true; 
 
\t container.appendChild(input); 
 
\t 
 
    var label = document.createElement('label') 
 
\t 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>

その良い:)