Question

我有一个UL和UL的下拉框。李喜欢以下：

<ul class="dropdown-menu" id="rmenu" role="menu">
<li><a href="#" data-value="photo">photo</a></li>
<li><a href="#"data-value="video">video</a></li>
<li><a href="#"data-value="audio">audio</a></li>
</ul>
<input type="hidden" name="search_param" value="all" id="search_param">

我上面还有一个隐藏字段，现在我想根据LI中的值选择更改值和隐藏字段的名称。

我写下jquery代码如下：

<script type='text/javascript'>
$("#rmenu").on("click", "a", function(e){
    e.preventDefault();
    var $this = $(this).parent();
    $("#search_param").val($this.data("value"));
    $("#search_param").name($this.data("value"));
});
</script>

但它不起作用，甚至没有改变名称的价值，我已经尝试了所有选项，但没有运气。

Answer 1

jQuery中没有方法name()。要更改名称属性，请改用 attr() 方法。

$("#search_param").attr('name',$this.data("value"));

此外，无需获取父元素，因为设置为a的数据属性不会标记为li。

var $this = $(this);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu" id="rmenu" role="menu">
  <li><a href="#" data-value="photo">photo</a>
  </li>
  <li><a href="#" data-value="video">video</a>
  </li>
  <li><a href="#" data-value="audio">audio</a>
  </li>
</ul>
<input type="hidden" name="search_param" value="all" id="search_param">
<script type='text/javascript'>
  $("#rmenu").on("click", "a", function(e) {
    e.preventDefault();
    var $this = $(this);
    $("#search_param").val($this.data("value"));
    $("#search_param").attr('name', $this.data("value"));
  });
</script>

Answer 2

您的$ this中有父（li），但您有a标记中的数据，您也可以使用.attr('name',val)更改名称

$("#rmenu").on("click", "a", function(e){
    e.preventDefault();
    var $this = $(this);
    $("#search_param").val($this.data("value"));
    $("#search_param").attr('name',$this.data("value"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu" id="rmenu" role="menu">
<li><a href="#" data-value="photo">photo</a></li>
<li><a href="#"data-value="video">video</a></li>
<li><a href="#"data-value="audio">audio</a></li>
</ul>
<input type="text" name="search_param" value="all" id="search_param">

Answer 3

我认为你的方式不会起作用

<ul class="dropdown-menu" id="rmenu" role="menu">
    <li><a href="#" data-value="photo">photo</a></li>
    <li><a href="#"data-value="video">video</a></li>
    <li><a href="#"data-value="audio">audio</a></li>
</ul>
<input type="hidden" name="search_param" value="all" id="search_param">
<script>
$(function(){
    $('#rmenu > li > a').click(function(){
        var val = $(this).attr('data-value');
        $('#search_param').attr('name', val);
        $('#search_param').val(val);
    });
});
</script>

这应该有效

Answer 4

试试这个：

<script type = "text/javascript"> 
$("#rmenu").on("click", "a", function(e){
    e.preventDefault();
    $("#search_param").attr("name",$(this).data("value"))
    $("#search_param").attr("value",$(this).data("value"))
});
</script>

Jquery用选择LI

4 个答案: