如何设置选定的li值以使用jquery输入 [英] how to set selected li value to input with jquery

问题描述

我不知道如何使用jquery获得结果:

I don't know how to use jquery the get the result:

1. 单击li将添加选择的类并删除其他选定的li

1. click the li will add select class and remove others selected li

将select li数据值设置为input(id:sizevalue)

set the select li datavalue to input(id:sizevalue)

确保单击提交"按钮时应选择li列表之一

make sure the li list should be selected one when click submit button

<form name="form">
<style>
    #sizelist ul{list-style-type:none;}
    #sizelist ul li{float:left;display:inline;margin-right:5px;width:auto;overflow:hidden;}
    #sizelist ul li a{display:block;border:1px solid #CCCCCC;padding:5px 6px 5px 6px;margin:1px;}
    #sizelist ul li a:hover{border:2px solid #FF6701;margin:0px;}
    #sizelist .select a{border:2px solid #FF6701;margin:0px;}
</style>

<ul id="sizelist">
    <li datavalue="S"><a href="javascript:void(0);">S</a></li>
    <li datavalue="M"><a href="javascript:void(0);">M</a></li>
    <li datavalue="L"><a href="javascript:void(0);">L</a></li>
    <li datavalue="XL"><a href="javascript:void(0);">XL</a></li>
</ul>

<input id="sizevalue" size="15" name="size" type="text" />
<input type="button" value="submit"/>
</form>

plz帮助

推荐答案

以下将实现您想要的:

HTML

<form name="size-form">
    <ul id="sizelist">
      <li data-value="S"><a href="#">S</a></li>
      <li data-value="M"><a href="#">M</a></li>
      <li data-value="L"><a href="#">L</a></li>
      <li data-value="XL"><a href="#">XL</a></li>
    </ul>

    <input id="sizevalue" size="15" name="size" type="text" />
    <input type="submit" value="submit"/>
</form>

JavaScript

$("#sizelist").on("click", "a", function(e){
    e.preventDefault();
    var $this = $(this).parent();
    $this.addClass("select").siblings().removeClass("select");
    $("#sizevalue").val($this.data("value"));
})

$("form[name=size-form]").submit(function(e) {
    //do your validation here
    if ($(this).find("li.select").length == 0) {
        alert( "Please select a size." );
        e.preventDefault();
    }
});

jsFiddle演示

您应该使用 data- *属性存储数据.

这篇关于如何设置选定的li值以使用jquery输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！