javascript - 在不知道任何有关值的信息的情况下选择值时切换元素

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();
    }
});

但是，如果有人编辑“Value 2”并将其更改为“VALue 2”或“VALue 2”或“Value2”，会发生什么情况？该代码将停止工作。在这种情况下，您采取了什么措施来避免这种情况？

我可以附加到“ID”，但如果删除 ID=2 的记录并稍后使用 ID=10 重新创建，会发生什么情况？然后代码将再次停止工作。

我不知道该怎么做，有什么建议吗？有想法吗？解决方法？

Answer 1

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

然后你就有了这个 HTML 代码(这里的新列是“showInput”):

<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();
    }
});