使用ul li更改多选
Change multiple option with ul li
在我的网店中,我有多个选项,每个选项都会更改图像。客户可以看到它会是什么样子。
示例:
<label>color group 1</label>
<select>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>
<label>color group 2</label>
<select>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="blue">blue</option>
</select>
选择这些选项时,图像的颜色会发生变化。为此,我使用了以下javascript,它自动添加了"color1=red&"answers"color2=red&"等
<script>
$( "select" )
.change(function () {
var str = "http://www.ballonnenkoerier.nl/image/catalog/designer/image.php?product_id=<?php echo $product_id; ?>&",
i = 0;
$( "select option:selected" ).each(function() {
i++;
str += 'color' + i + '=' + $( this ).text() + '&';
});
str = str.replace(/&$/, '');
$('#thumbnail').attr('src', str);
})
.change();
</script>
图像是这样工作的:
<img id="thumbnail" src="image/catalog/designer/image.php?product_id=50&color1=red&color2=yellow&color3=blue&" title="image" alt="image" />
我的问题:
我想制作另一个下拉列表(这更友好,因为我可以使用<ul><li>列表显示颜色,但javascript不再工作。
是否有可能更改javascript以使用此方法?
我把这个放在一个JSFiddle中:http://jsfiddle.net/j0dv6ywe/
我希望有人能为我找到答案!!
假设您的列表看起来像这样。。。
<ul>
<li class="red">Red</li>
<li class="yellow">Yellow</li>
<li class="blue">Blue</li>
</ul>
你已经按照你建议的样式来展示颜色。
那么你的jQuery处理程序可能是这样的。。。
$('ul li').click(function() {
$(this).parent().find('.selected').removeClass('selected');
$(this).addClass('selected');
var str = "http://www.ballonnenkoerier.nl/image/catalog/designer/image.php?product_id=<?php echo $product_id; ?>&",
i = 0;
$( "ul li.selected" ).each(function() {
i++;
str += 'color' + i + '=' + $( this ).text() + '&';
});
str = str.replace(/&$/, '');
$('#thumbnail').attr('src', str);
});
试试看,你能看到我是如何努力让它适应你的情况的吗?让我知道这是否有帮助,或者我是否可以进一步帮助?
相关文章:
- 使用jquery动态创建ul-li
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- ul-li专属功能
- nextSibling ul li ul
- 如何在应用切换点击功能之前,默认情况下在页面加载时隐藏带有特定类的ul-li
- 自动完成搜索无法正常工作,请不要迭代$中的所有元素.每个ul-li都会及时显示响应
- Javascript 从嵌套的 UL LI 复选框生成递归 JSON 对象
- 有角度的自动建议文本排版和html ul li下拉列表
- Jquery菜单UL LI插入
- 更改Jquery UL li筛选器中的链接颜色
- Jquery #id ul li 一个选择
- Bootstrap手风琴/可折叠不适用于ul/li导航
- 如何将Class添加到ul li
- 使用ul li更改多选
- 使用 jquery 计算页面中一级 UL LI 的数量
- javascript recursive ul li json
- jQuery ul li 切换菜单
- 转到 指定文本 在基于 ul li 的选择框中
- ul li $(this).text() 什么也没显示
- 通过jQuery向左点击ul li