單擊鏈接時更改選項表單元素的值

如果選項和鏈接不在同一個字段集中，我不確定這是否可行？單擊鏈接時更改選項表單元素的值

我有一張網格圖片和一個產品可用的16色色調名稱。我也有一個'選擇顏色'選項列表的顏色名稱。

我想要名稱鏈接到顏色，所以當您單擊表格中某種顏色的圖像時，它會將選項更改爲適當的值。

我試圖複製我的代碼在JS小提琴，道歉，它不是很清楚。我已經把'海冬青'作爲一個例子的圖像（所有其他圖像是本地的）

是否有可能用CSS來實現這一點？

我發現下面的代碼，但我努力得到它的工作，也許這是不是我需要在這種情況呢？

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

來源

2012-10-18 Francesca

是jQuery的一個選項，還是這需要在普通的JavaScript？ – j08691

兩者都很好。我的購物車系統無論如何都使用javascript，所以我很樂意使用任何東西。如果有一個CSS版本會很棒，因爲我覺得它更清潔一些，但我知道它可能比它的價值更麻煩。 – Francesca

@Francesca，你的問題的解決方案需要一些編程，所以JS/jQuery IS *需要*。此外，我會更改標記，以便名稱與圖像相關，並且也包含在錨點中。 – Marko

你可以做這樣的jsFiddle example（使用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-18 23:01:45 j08691

謝謝，這很簡單，效果很好。 – Francesca

除了可憐的標記之外，文件名必須與值匹配，並且名稱不可點擊。哈克解決方案，如果你問我:) – Marko

您必須使用的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-18 22:53:41 Ibu

這裏有一個更新的小提琴改進標記和你需要的功能。

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-18 23:04:11 Marko

我所花費的時間來適應的代碼爲您的網站，只貼上裏面的下面的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-18 23:16:52 Nelson

單擊鏈接時更改選項表單元素的值

回答

相關問題