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

我在这里遇到了一个问题，不知道如何让它正常工作。我有一个存储一些值的表，当然我可以对任何记录执行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" />

但是，如果编辑“值2”并将其更改为“值2”或“值2”或“值2”，会发生什么情况？代码将停止工作。在这种情况下，您是如何避免这种情况的

我可以附加到“ID”，但是如果有人删除ID=2的记录，然后用ID=10重新创建，又会发生什么呢？然后代码将再次停止工作

---

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

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

然后就有了这个HTML代码（这里的新列是“showInput”）：

---

你需要知道一些事情。。。要么有人需要传递您想要比较的值作为配置，要么它应该是一个常量……您编写的代码甚至不起作用。值是

2

，而不是

value 2

。它是否应该始终是第二个选项，无论其值或文本是什么？然后使用

$（'.change:selected'）.index（）

获取其位置。或者，您可以将一个类附加到元素，并对其进行测试。需要有某种方法来知道哪个选项会导致您显示其他输入。计算机不能读心。

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

<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" />

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