Question

我正在努力弄清楚如何使用jQuery / Javascript重新索引（？）一系列隐藏字段。每次用户单击创建按钮时，都会生成以下示例代码。应用于tier []中隐藏字段的数值是从下拉列表中选择的选项的索引。

我遇到的问题是每个代码块（第一个除了tier1）都应该有删除选项。当单击删除链接时，我已经实现了一些jQuery，它删除了具有所选ID的div。主要问题是我需要在删除时更改每个块的名称并重新索引下拉列表，因此数字是递增的。隐藏字段也需要遵循下拉列表的索引。

我正在努力确定如何使用Javascript或jQuery实现这一目标。

我尝试在删除之前包含一个示例。有4个块，每个块都是根据下拉列表中的选项逐步创建的。用户可以尝试删除块3.目前，这将使用上面的jQuery从select中删除选项，但结果显示将列出不一致的块编号，隐藏字段将具有不正确的索引，下拉列表将是'不同步'。

<script type="text/javascript"> 
    $(document).ready(function() {  
        $("a.removeTier").live('click', function() {
            var tierId = $(this).parent().parent().attr('id').match(/\d+$/);
            $('#tiers option:eq('+tierId+')').remove();
            $('#tier'+tierId).remove();             
            return false;               
        });
    });
</script>

<p align="left">
    <label style="width: 45px;" for="newTier"><b>Tier:</b> *</label>
    <button style="width: 70px; font-size: 11px;" value="New Tier" id="newTier" name="newTier">New Tier</button>
    <select name="tiers" id="tiers">
        <option value="0">Select</option>                               
        <option selected="" value="1">Tier 1</option>
        <option value="2">Tier 2</option>
        <option value="3">Tier 3</option>
        <option value="4">Tier 4</option>
    </select>
</p>

<div id="tierRight">    

    //1
    <div id="tier1">
        <div style="text-align: left;">
            Tier 1<br><label for="publication_date_1">Publication Date: </label>
            <input type="text" value="" readonly="readonly" name="tier[1][publication_date]" id="publication_date_1" size="10" maxlength="10" class="publication_date hasDatepicker">           <input type="hidden" value="2010-09-01" name="tier[1][publication_date_db]" id="publication_date_db_1">
        </div>
        <span>
            <a class="removePanel" id="panel132" title="Remove `Autism Initiatives` from `Tier 1`" href="#">Autism Initiatives</a>
            <input type="hidden" value="132" name="tier[1][panels][132][panelId]">
            <input type="hidden" value="Autism Initiatives" name="tier[1][panels][132][panelName]">
        </span> 
    </div><br>

    //2
    <div id="tier2">
        <div style="text-align: left;">
            Tier 2 - [<a id="tier2" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[2][publication_date]">Publication Date: </label>
            <input type="text" value="" readonly="readonly" name="tier[2][publication_date]" id="publication_date_2" size="10" maxlength="10" class="publication_date hasDatepicker">
            <input type="hidden" name="tier[2][publication_date_db]" id="publication_date_db_2" value="2010-09-08">
        </div>
        <span>
            <a class="removePanel" id="panel149" title="Remove `Autism 2` from `Tier 2`" href="#">Autism 2</a>
            <input type="hidden" value="149" name="tier[2][panels][149][panelId]">
            <input type="hidden" value="Autism 2" name="tier[2][panels][149][panelName]">
        </span>
    </div><br>

    //3
    <div id="tier3">
        <div style="text-align: left;">
            Tier 3 - [<a id="tier3" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[3][publication_date]">Publication Date: </label>
            <input type="text" value="" readonly="readonly" name="tier[3][publication_date]" id="publication_date_3" size="10" maxlength="10" class="publication_date hasDatepicker">
            <input type="hidden" name="tier[3][publication_date_db]" id="publication_date_db_3" value="2010-09-15">
        </div>
        <span>
            <a class="removePanel" id="panel150" title="Remove `Autism 3` from `Tier 3`" href="#">Autism 3</a>
            <input type="hidden" value="150" name="tier[3][panels][150][panelId]">
            <input type="hidden" value="Autism 3" name="tier[3][panels][150][panelName]">
        </span>
    </div><br>

    //4
    <div id="tier4">
        <div style="text-align: left;">
            Tier 4 - [<a id="tier4" class="removeTier" title="Remove Tier" href="#">Remove</a>]<br><label for="tier[4][publication_date]">Publication Date: </label>
            <input type="text" value="" readonly="readonly" name="tier[4][publication_date]" id="publication_date_4" size="10" maxlength="10" class="publication_date hasDatepicker">
            <input type="hidden" name="tier[4][publication_date_db]" id="publication_date_db_4" value="2010-09-22">
        </div>
        <span>
            <a class="removePanel" id="panel151" title="Remove `Autism 4` from `Tier 4`" href="#">Autism 4</a>
            <input type="hidden" value="151" name="tier[4][panels][151][panelId]">
            <input type="hidden" value="Autism 4" name="tier[4][panels][151][panelName]">
        </span>
    </div><br>
</div>

Answer 1

首先，您需要清理HTML - 您在div和a上使用id =“tier1”，这最终会导致问题。

这是一个显示可能方法的简单变体：

<div class="tier">
    <p class="title">Tier 1</p>
</div>
<div class="tier">
    <p class="title">Tier 2</p>
    <p class="delete">Delete Me</p>
</div>
<div class="tier">
    <p class="title">Tier 3</p>
    <p class="delete">Delete Me</p>
</div>

Javascript：

$(function() {
   $(".delete").bind("click", function() { 
       $(this).parent().remove();
       $(".tier").each( function(index) {
           var tierIndex = index+1;
           $(this).find(".title").text("Tier " + tierIndex);
       });
   });
});

或jsFiddle here。

如何重新索引选择框以及隐藏字段

1 个答案: