Question

我有一个带有.selected类的select元素。我想检测它有多少选项（我相信我必须使用.length），并且能够操纵选择选项显示，类似于Sourceforge处理其列表的方式。

这是我所谈论的形象。 enter image description here

我可以使用：nth-child来处理值并显示文本，但我的问题是将选项[length]显示为文本框，这样我可以逐个更改它们的值。（我不是要求拖拽和放弃排序。我想自己这样做，因此在这篇文章中它是无关紧要的。如果我需要，我会为此单独发帖子）

＆＃13;

$(document).ready(function() {
  var hmcp = $(".how-many-changable-properties");
  hmcp.html( $(".selected option").length );
  
  inputTxt = $("<input type=\"text\">");
  
  $(".options").html( $(".selected option").length + " " + inputTxt);
});

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <link type="text/css" rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  </head>
  <body>
    <span class="how-many-changable-properties"></span>
    <div class="options"></div>
    
    <select class="selected">
      <option value="apples">apples</option>
      <option value="bananas">bananas</option>
      <option value="oranges">oranges</option>
    </select>
  </body>
</html>

＆＃13;

Answer 1

以下是如何做到这一点：

$(document).ready(function() {
    var hmcp = $(".how-many-changable-properties");
    hmcp.html( $(".selected option").length );
    var inpt = $('<input type="text" />');
  
    $('.selected option').each(function() {
        var that = $(this);
        inpt.clone().val( this.value ).add( $('<br/>') ).on('input', function() {
            that.val( this.value ).text( this.value );
        })
        .appendTo( '.options' );
    });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <span class="how-many-changable-properties"></span>
    <div class="options"></div>
    
    <select class="selected">
      <option value="apples">apples</option>
      <option value="bananas">bananas</option>
      <option value="oranges">oranges</option>
    </select>

动态更改元素的子属性数组

1 个答案: