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

Toggle element when value is selected without know any information about value

本文关键字：选择 元素 情况下 不知道 任何 信息      更新时间：2023-09-26

我这里有一个问题，不知道正确的路径来获得这个工作。我有一个表，其中存储了一些值，当然我可以对任何记录执行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"并将其更改为"值2"或"值2"或"Value2"会发生什么?代码将停止工作。在这种情况下，你做了什么来避免这种情况?

我可以附加到"ID"，但再次发生了什么，如果任何删除记录与ID=2和ID=10重新创建以后?然后代码将再次停止工作。

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

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

然后你有这个HTML代码(这里的新col是"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();
    }
});
相关文章：