使用 ID 号隐藏下拉菜单

Question

我将列表[object1, object2, ...] 传递给下拉菜单。当我按下F12 并希望知道object1 的ID 是Total number of clients 在下面的HTML 代码中。我想在 JS 文件中使用该 ID。我如何为列表中的每个项目生成一个 id。否则，我可以在 JS 文件中使用什么来代替 Total number of clients 的 id 号？

<div class="select-wrapper select initialized"><span class="caret">▼</span><input type="text" class="select-dropdown" readonly="true" data-activates="select-options-655bff26-fb5b-1642-ddeb-41bd1b4ab105" value="Total number of clients">
  <ul id="select-options-655bff26-fb5b-1642-ddeb-41bd1b4ab105" class="dropdown-content select-dropdown" style="width: 100px; position: absolute; top: 1px; left: 0px; opacity: 1; display: none;">
    <li class="active selected"><span>Total number of clients</span></li>
    <li class=""><span>Total new loans</span></li>
    <li class=""><span>Total renewals</span></li>
    <li class=""><span>Total debit fees</span></li>
    <li class=""><span>Total brokerage fees</span></li>
    <li class=""><span>Total interest</span></li>
    <li class=""><span>Total accounts receivable</span></li>
    <li class=""><span>Total active accounts receivable</span></li>
    <li class=""><span>Total special accounts receivable</span></li>
    <li class=""><span>Total accounts loss</span></li>
    <li class=""><span>Total completed loans</span></li>
    <li class=""><span>Total terminated loans</span></li>
    <li class=""><span>Total suspended loans</span></li>
    <li class=""><span>Total delayed fees</span></li>
    <li class=""><span>Total denied fees</span></li>
  </ul>
  <select class="select initialized" id="id_type_choice" name="type_choice">
    <option value="0" selected="selected">Total number of clients</option>
    <option value="1">Total new loans</option>
    <option value="2">Total renewals</option>
    <option value="3">Total debit fees</option>
    <option value="4">Total brokerage fees</option>
    <option value="5">Total interest</option>
    <option value="6">Total accounts receivable</option>
    <option value="7">Total active accounts receivable</option>
    <option value="8">Total special accounts receivable</option>
    <option value="9">Total accounts loss</option>
    <option value="10">Total completed loans</option>
    <option value="11">Total terminated loans</option>
    <option value="12">Total suspended loans</option>
    <option value="13">Total delayed fees</option>
    <option value="14">Total denied fees</option>
  </select>
</div>

这是我生成下拉菜单的方式：

settings.py

​​>

STATISTICS_TYPE_CHOICES = (
    (0, _('Total number of clients')),
    (1, _('Total new loans')),
    (2, _('Total renewals')),
    (3, _('Total debit fees')),
    (4, _('Total brokerage fees')),
    (5, _('Total interest')),
    (6, _('Total accounts receivable')),
    (7, _('Total active accounts receivable')),
    (8, _('Total special accounts receivable')),
    (9, _('Total accounts loss')),
    (10, _('Total completed loans')),
    (11, _('Total terminated loans')),
    (12, _('Total suspended loans')),
    (13, _('Total delayed fees')),
    (14, _('Total denied fees')),
)

forms.py

​​>

class StatisticsBaseForm(forms.Form):
    type_choice = forms.ChoiceField(label=_("Type"), choices=settings.STATISTICS_TYPE_CHOICES, initial=0, required=False)
    period = forms.ChoiceField(label="Period", choices=settings.PERIODS, initial='week', required=False)
    from_regular_product = forms.ModelChoiceField(
        queryset=ProductConfig.objects.filter(pk=-1), required=False,
        label=_('Product'))
    from_special_product = forms.ModelChoiceField(
        queryset=ProductConfig.objects.filter(pk=-1), required=False,
        label=_('Product'))
    product_type = forms.ChoiceField(
        choices=settings.LOANWOLF_PRODUCT_TYPE_CHOICES, required=False,
        initial='regular', label=_('Product type'))
    debit_frequency = forms.ChoiceField(
        choices=settings.LOANWOLF_PRODUCT_DEBIT_FREQUENCIES_CHOICES,
        required=False)

    def __init__(self, *args, **kwargs):
        super(StatisticsBaseForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.form_class = 'row'
        self.helper.layout = StatisticalToolsLayout

        company = get_current_company()
        regular_products = company.available_products.filter(
            is_active=True, product_type='regular')
        special_products = company.available_products.filter(
            is_active=True, product_type='special')

        self.fields['from_regular_product'].queryset = regular_products
        self.fields['from_special_product'].queryset = special_products

        if regular_products:
            self.fields['from_regular_product'].initial = \
                settings.LOANWOLF_EXTERNAL_REQUEST_DEFAULT_PRODUCT_INDEX

        if special_products:
            self.fields['from_special_product'].initial = \
                settings.LOANWOLF_EXTERNAL_REQUEST_DEFAULT_PRODUCT_INDEX

    class Meta:
        model = Statistics
        fields = '__all__'

formlayouts.py

​​>

StatisticalToolsLayout = \
        CardContent(
            Row(
                Column('type_choice', css_class="s2"),
            ),
            Row(
                Column('period', css_class="s2"),
                Column('product_type', css_class="s2"),
                Column(
                    'from_regular_product',
                    'from_special_product',
                    css_class="s4"),
                Column('debit_frequency', css_class="s2"),
            ),
            CardAction(
                Div(
                    Button('apply', _('Apply'), css_class='waves-effect waves-light btn white-text'),
                    css_class="right-align"),
            ),
        )

HTML

<div class="row main-content">
    <div class="col s10">
        <div class="card">
            <h5>{{ form.form_title }}</h5>
            {% crispy form form.helper %}
        </div>
    </div>
</div>

我在下拉菜单Type 中有不同类型的可能请求。例如Total number of loan is selected，则其他一些下拉菜单将被隐藏，而其他一些将显示出来。但是，我需要一个身份证号码来做这样的事情（http://jsfiddle.net/jadendreamer/5SArB/）。我需要为STATISTICS_TYPE_CHOICES中的所有项目生成ID吗？

如果有什么遗漏请告诉我。

---

问题很简单......我知道type_choice = forms.ChoiceField(label=_("Type"), choices=settings.STATISTICS_TYPE_CHOICES, initial=0, required=False)给我们一个下拉菜单并且ids在JS文件中使用，我怎么能为STATISTICS_TYPE_CHOICES中的每个元素生成一个id号？

更新

$(document).ready(function () {
    toggleFields(); 

    $("#id_type_choice").change(function () {
        toggleFields();
    });

});

function toggleFields() {
    if ($("#id_type_choice").val() == 0)
        $("#div_id_period, #div_id_product_type").hide();
    else if ($("#id_type_choice").val() == 1)
        $("#div_id_period").hide();
    //else if ($("#id_type_choice").val() == 2)
    //else if ($("#id_type_choice").val() == 3)
    //else if ($("#id_type_choice").val() == 4)
    //else if ($("#id_type_choice").val() == 5)
    //else if ($("#id_type_choice").val() == 6)
    //else if ($("#id_type_choice").val() == 7)
    //else if ($("#id_type_choice").val() == 8)
    //else if ($("#id_type_choice").val() == 9)
    //else if ($("#id_type_choice").val() == 10)
    //else if ($("#id_type_choice").val() == 11)
    //else if ($("#id_type_choice").val() == 12)
    //else if ($("#id_type_choice").val() == 13)
    //else if ($("#id_type_choice").val() == 14)
    //else
        //$("#parentPermission").show();
}

Answer 1

如果你还是要使用 javascript，大概你会有 jquery，你可以只选择你没有隐藏的项目。

我假设您将使用某些值隐藏某些选项，您可以使用以下方法隐藏：

$('#id_type_choice option[value="10"]').hide();

您可以随心所欲地获取具体信息，例如父母的 ID。然后您可以计算所有未隐藏的选项。

var optCount = $('#id_type_choice option:visible').length