Question

我在这里遇到了一个问题，并且不知道正确的方法来实现这个目标。我有一个表存储一些值，当然我可以对任何记录进行CRUD操作。这些值用于动态构建SELECT元素。所有这一切都很完美，但我需要在选择特定值时切换一个元素可见性。例如：

<select class="change">
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
  <option value="3">Value 3</option>
</select>

<input type="text" class="show" style="display:none" />

将此作为输入，默认情况下.show是隐藏，让我们说任何时候我选择“值2”它将被显示否则应该再次隐藏。我知道如何使用以下代码在jQuery中执行此操作：

$(".change").on('change', function() {
    option = $('.change :selected').val();
    if (option == "Value 2") {
        $(".show").show();
    } else {
        $(".show").hide();
    }
});

但如果编辑“值2”并将其更改为“VAlue 2”或“VALUE 2”或“Value2”，会发生什么？代码将停止工作。在这种情况下，你做了什么来避免这种情况？

我可以附加到“ID”但是如果有任何删除ID = 2的记录并且稍后在ID = 10时重新创建会发生什么？然后代码将再次停止工作。

我不知道如何完成这项工作，有什么建议吗？想法？解决方法？

Answer 1

我猜您正在使用来自数据库的数据构建下拉列表。我建议在表格中添加一个新列。此列将是一个简单的bool，用于确定您的输入是否需要隐藏或无。

然后你有这个HTML代码（这里新的col是＆＃34; showInput＆＃34;）：

<select class="js-dropdown">
    <option value="foo" data-showInput="1">Foo</option>
    <option value="bar" data-showInput="0">Bar</option>
    <option value="foobar" data-showInput="1">Foobar</option>
</select>
<input type="text" class="js-input" />

这个JS代码：

var input = $(body).find('.js-input');

$('.js-dropdown').on('change', function() {
    var option = $(this).find(':selected');
    var showInput = parseInt(option.attr('data-showInput'));

    if (showInput === 1) {
        input.show();
    } else {
        input.hide();
    }
});

选择值时切换元素，但不知道有关值的任何信息

1 个答案: