【问题标题】:Changing the placeholder for multiple inputs based on relevant select根据相关选择更改多个输入的占位符
【发布时间】:2015-05-30 12:20:55
【问题描述】:

我对编程很陌生,但还不是很擅长……我一直在寻找并试图让它工作,但做不到。无论如何,用户应该能够添加数字 (http://codepen.io/anon/pen/dPaEoo),如果其中一个输入后面的选择选项发生更改,它应该更改该输入字段的占位符。 enter code here

当我尝试它时(我尝试使用 find、closest、prev 和许多其他东西),它不起作用,它改变了所有的输入,或者只是第一个......

任何帮助将不胜感激!

【问题讨论】:

    标签: jquery select placeholder


    【解决方案1】:

    只需将其添加到您的 js 文件中

    $('.optiesel').on('change',function() {
           $(this).prev('input').attr('placeholder',$(this).find(":selected").text()); 
    });
    

    编辑:这不适用于动态添加的元素(通常在应用.on 时它应该可以工作),但下面的代码将替代它。

    $(document).on('change', '.optiesel', function() {
        $(this).prev('input').attr('placeholder',$(this).find(":selected").text()); 
    });
    

    【讨论】:

    • 感谢您的回答!我在上面使用了马特的答案,但这似乎也有效:)
    • 很高兴它成功了!快乐编码.. :) 顺便说一句,如果它有效,请接受@Matt 的回答,以便对其他人有用.. :)
    【解决方案2】:

    您可能会遇到两件事:确保您触发的是“更改”事件,而不是选择时的“点击”事件。并且,确保将事件处理程序绑定到新的 .child 节点。像这样的:

    $("#addBtn").click(function () {
        var newChild = $(".child:last").clone();
        newChild.appendTo("#wrapDiv");
        bindSelectActions();
    });
    
    $("#removeBtn").click(function () {
        if ($('.child').length > 1) {
          $("#wrapDiv").children(".child:last").remove();
        }
    });
    var bindSelectActions = function () {
        $('.optiesel').change(function () {
        $(this).closest('.child').find('.input').attr('placeholder',     $(this).val());
        });
    }
    

    如果它是最后一个元素,我会避免删除功能

    【讨论】:

    • 非常感谢!现在可以了!我想知道,如果你有时间解释一下,为什么 bindSelectActions 在一个 var 中,而不是我期望的函数(比如 'function bindSelectActions (){code}'?
    • 在这种情况下,如果不添加任何元素,占位符的更改不起作用,你想要吗?
    • @Protpot - 定义函数(带或不带 var)的任何一种方式都有效。这里对差异进行了长时间的讨论:stackoverflow.com/questions/336859/…。检查一下,看看它是否会清除它,或者可能会让您更加困惑:) 无论哪种方式,您创建的函数都是一个对象;不同之处在于它的编译时间、调用位置以及传递方式。
    【解决方案3】:

    您正在动态添加新的输入和选择。如果您向您的选择添加一个侦听器,它将仅适用于在加载文档之前添加的侦听器。您需要向父 div 添加一个侦听器,然后通过单击选择来触发它。像这样:

    $('#wrapDiv').on('change', 'select.optiesel', function(){
        $(this).siblings('input.input').attr('placeholder', $(this).val());
    });
    

    此外,当您向 wrapDiv 添加一个新孩子时,您只是在克隆最后一个孩子,并且您正在应对所做的所有更改。将此代码的第三行添加到现有的 Add 函数中,以将输入更改为原来的样子:

    $("#addBtn").click(function () {
        var newChild = $(".child:last").clone();
        newChild.children('input').attr('placeholder', 'Thuisnummer (9 cijfers)').val('');
        newChild.appendTo("#wrapDiv");
    });
    

    如果只剩下一个孩子,也不要让用户删除他们。那时就没有什么可以克隆的了。您可以使用它来检查条件:

    if($("div#wrapDiv div.child").length > 1)
    

    【讨论】:

    • 感谢您的解释!如果只有一个数字,我有一些代码可以禁用删除按钮,但我没有在此处包含它。非常感谢您的意见,你们太棒了!
    • 没问题。我只是想尽我所能提供帮助,因为你说你是新来的。很高兴你把一切都解决了!
    • 我确实使用您的线路清除了克隆的值! :) 再次感谢大家,我希望有一天我能像你一样帮助别人:D
    猜你喜欢
    • 1970-01-01
    • 2014-09-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-05-11
    • 1970-01-01
    • 2018-02-09
    相关资源
    最近更新 更多