0

オプションとリンクが同じフィールドセットにない場合、これが可能かどうかわかりませんか？

製品が利用できる16色の色合いの写真と名前のグリッドがあります。また、色の名前が記載された「色の選択」オプションリストもあります。

名前を色にリンクさせたいので、表の色の1つの画像をクリックすると、オプションが適切な値に変更されます。

JS Fiddleでコードを複製しようとしましたが、はっきりしていません。例として「海のヒイラギ」を画像として使用しました（他のすべての画像はローカルです）

CSSだけでこれを達成することは可能ですか？

JSフィドル

ライブサイトの例

次のコードを見つけましたが、それを機能させるのに苦労しています。おそらく、これはこの状況で必要なものではありませんか？

<form>
      <select id="action">
         <option value="a">Add</option>
         <option value="b">Delete</option>
      </select>
 </form>

<a href="#" onClick="document.getElementById('action').value='a'">Add</a> 
<a href="#" onClick="document.getElementById('action').value='b'">Delete</a>
4

4 に答える 4

2

このjsFiddleの例のように（jQueryを使用して）それを行うことができます。

$('img').click(function() {
    var item = $(this).attr('src').split('/').pop().split('.')[0];
    $('select.item_colour option').each(function() {
        if ($(this).val().toLowerCase() == item) $(this).prop('selected', true);
    });
});​
于 2012-10-18T23:01:45.100 に答える
0

現在選択されているオプションを変更するには、selectedIndexを使用する必要があります。

<a href="#" onClick="document.getElementById('action').selectedIndex=0">Add</a>
<a href="#" onClick="document.getElementById('action').selectedIndex=1">Add</a>

インラインJavaScriptを回避できれば、よりクリーンになります。

html：

追加削除

追加削除

次に、スクリプト：

window.onload = function (){ // make sure the content is loaded
   var addBtn = document.getElementById("addBtn");
   var delBtn = document.getElementById("deleteBtn");
   var selTag = document.getElementById("action");

   addBtn.onclick = function () {
       selTag.selectedIndex = 0;
       return false;
   }
   delBtn.onclick = function () {
       selTag.selectedIndex = 1;
       return false;
   }
}
于 2012-10-18T22:53:41.743 に答える
0

これは、マークアップと必要な機能が改善された更新されたフィドルです。

http://jsfiddle.net/fm6jG/5/

マークアップ

<div id="colourList">
    <a href="#">
        <img src="" />
        <span>Red</span>
    </a>
    <a href="#">
        <img src="" />
        <span>Seaholly</span>
    </a>
    <a href="#">
        <img src="" />
        <span>Earth</span>
    </a>
    <a href="#">
        <img src="" />
        <span>Sage</span>
    </a>
</div>
<form>
    <label>Choose colour:</label><br />
    <select class="item_colour">
    <option value="Red">Red</option>
    <option value="Seaholly">Seaholly</option>
    <option value="Sage">Sage</option>
    <option value="Earth">Earth</option>
    <option value="Spice">Spice</option>
    <option value="Jet">Jet</option>
    <option value="Tarmac">Tarmac</option>
    <option value="Denim">Denim</option>
    <option value="Cream">Cream</option>
    <option value="Parchment">Parchment</option>
    <option value="Teal">Teal</option>
    <option value="Damson">Damson</option>
    <option value="Moorland">Moorland</option>
    <option value="Forest">Forest</option>
    <option value="Amethyst">Amethyst</option>
    <option value="Burgundy">Burgundy</option>
    </select>
</form>

jQuery

var $itemColourList = $(".item_colour");
$("#colourList a").click(function(e) {
    e.preventDefault();
    var colourName = $(this).children("span").text();
    $itemColourList.val(colourName);
});​
于 2012-10-18T23:04:11.833 に答える
0

私はあなたのサイトにコードを適応させるために時間をかけました、あなたのサイトの中に次のjavascriptを貼り付けるだけ<body>です：

<script type="text/javascript">
$(document).ready(function() {
   $('#colourList img').wrap('<a href="javascript:void(0)" class="imgcolor" />');
   $('.imgcolor').bind('click', function(e) {
      e.preventdefault();
      ind = $(this).parent().parent().index();
      tx = $(this).parent().parent().parent().next().find('td:eq('+ind+')').text();
      ind = $(".item_colour option[value='"+tx+"']").index();
      $(".item_colour").selectedIndex = ind;
   });
});
</script>

それはあなたが望むことをするはずです、それはまた<a>それらがクリック可能として見えるように要素であなたのすべての画像を包みます。他の解決策のようにファイル名ではなく、テーブルセルから色名を取得します。

于 2012-10-18T23:16:52.540 に答える