Question

我不知道如何使用jquery得到结果：

点击li将添加选择类并删除其他选择的li
将select li datavalue设置为input（id：sizevalue）

确保在点击提交按钮

时选择一个列表

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

Answer 1

试试这个：

<强> HTML

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

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

<强>的jQuery

$('#sizelist a').on('click', function(e) {
  e.preventDefault();

  // This removes the class on selected li's
  $("#sizelist li").removeClass("select");

  // adds 'select' class to the parent li of the clicked element
  // 'this' here refers to the clicked a element
  $(this).closest('li').addClass('select');

  // sets the input field's value to the data value of the clicked a element
  $('#sizevalue').val($(this).data('value'));
});

记下我所做的更改：

- 将datavalue替换为data-value，以便能够使用jQuery的.data()方法

- 将data-value属性转移到a元素，因为它们是实际被点击的元素

- 替换了javascript:void(0)中的href，因为它没有做任何事情

Answer 2

以下将实现您想要的目标：

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

您应该使用data-* attribute来存储数据。

Answer 3

我认为此代码适合您：

$('#sizelist a').on('click', function(event) {
    // Clear previous selection
    $('#sizelist li').removeClass('selected');

    // Add selection css class
    $(event.target).parent('li').addClass('selected');

   // Change value in input
   $('#sizevalue').val($(event.target).parent('li').attr('datavalue'));
});

NB。在HTML中添加其他属性的首选方法是在数据前添加前缀 - 。

如何设置选定的li值以使用jquery输入

3 个答案: