0

複数選択オプションを使用して、画像を作成したい。

http://jsbin.com/itujiy

イメージを作りたい。a、b、c、またはdを選択すると、ディレクターをa、b、c、またはdに変更します

x、y、zまたはtを選択したときに、2番目のディレクターをx、y、zまたはtに変更したい

最後に、1,2,3..または10を選択すると、画像の数が1,2,3..または10に変更されます

    <script type="text/javascript"> 
<!-- 
function showkit() { 
  var htmlStr=""; 
  var option = document.getElementById(event.srcElement.id); 
  for (i=0;i<option.options.length;i++) { 
    if (option.options[i].selected) { 
      htmlStr+=''; 
      htmlStr+=option.options[i].value; 
      htmlStr+=''; 
    } 
  } 
  document.getElementById('kitDisp').innerHTML = htmlStr; 
} 


function showrims() { 
  var htmlStr=""; 
  var option = document.getElementById(event.srcElement.id); 
  for (i=0;i<option.options.length;i++) { 
    if (option.options[i].selected) { 
      htmlStr+=''; 
      htmlStr+=option.options[i].value; 
      htmlStr+='-'; 
    } 
  } 
  document.getElementById('rimsDisp').innerHTML = htmlStr; 
} 

function showcolor() { 
  var htmlStr=""; 
  var option = document.getElementById(event.srcElement.id); 
  for (i=0;i<option.options.length;i++) { 
    if (option.options[i].selected) { 
      htmlStr+=''; 
      htmlStr+=option.options[i].value; 
      htmlStr+=''; 
    } 
  } 
  document.getElementById('colorDisp').innerHTML = htmlStr; 
} 

//--> 
</script>

HTML コード:

<select size="3" id="Final_Version" multiple onChange="showkit()"> 
<option value="1">a</option> 
<option value="2">b</option> 
<option value="3">c</option> 
<option value="4">d</option> 

</select>

<select size="3" id="Final_Version2" multiple onChange="showrims()"> 
<option value="1">x</option> 
<option value="2">y</option> 
<option value="3">z</option> 
<option value="4">t</option> 

</select>

<select size="3" id="Final_Version3" multiple onChange="showcolor()"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option>
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option>
<option value="9">9</option> 
<option value="10">10</option> 


</select>


AND here i want to create the image :( <img src="director-a/director-b/image-5.jpg" />

どうぞ、どんなアイデアでも！私の下手な英語をおねがいします！

4

1 に答える 1

0

これはうまくいくかもしれません：

 var $txt = {first:null,second:null,third:null};

  $('select').on('change', function(){


    switch($(this).attr('id')){

    case 'Final_Version' : $txt.first = 'directory-'+ $('#Final_Version').find(':selected').text();
    case 'Final_Version2' : $txt.second = 'subdir-'+$('#Final_Version2').find(':selected').text();
    case 'Final_Version3' : $txt.third = 'img-'+$('#Final_Version3').find(':selected').text();

        }

       alert('url = '+$txt.first+'/'+$txt.second+'/'+$txt.third);


 });
于 2012-07-16T12:00:03.250 に答える