使用 jQuery 更改 select 选项时更改占位符

Question

我的网站在页面的不同位置具有相同的表单。当我更改 select 选项时，我希望能够在文本输入更改中有一个占位符。我有一个带有一个例子的 JSFiddle：http://jsfiddle.net/y1jhhqLz/

所有表格如下所示：

<form id="form1">
    <select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
        <option value='-1'>Form 1</option>
        <option value='First'>First Choice</option>
        <option value='Second'>Second Choice</option>
        <option value='Third'>Third Choice</option>
    </select> 
    <input id="myInput1" type="text" placeholder="Form 1"></input>
    <input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>

在这个例子中，当我 select 选项 Third.

时，我想更改 ID 为 myInput 的输入的占位符。

我尝试了很多不同的方法来包含最近的尝试，我把它放在了 JSFiddle 上。

如有任何帮助，我们将不胜感激！

Answer 1

向 select 添加更改侦听器，然后获取 select 的值并将属性占位符设置为所述值：

$('select').on('change',function(){
    var place=$(this).val();
  var num=$(this).attr('id').substring(8);
    $('#myInput'+num).attr('placeholder',place);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p>How do I get it so that when I click on the option that says Third Choice (for any form), it will put in the text box (with the form and number ) a placeholder: "You did it correctly"? But it shouldn't change any other form but the one where you change the select to the Third Choice option. I tried using a onClick function.
</p>
<br><br>
    <h2>Please pick the third option from Form 1:</h2>
<form id="form1">
    <select id="mySelect1" onClick="changePlaceHolder('#mySelect1','#myInput1')">
        <option value='-1'>Form 1</option>
        <option value='First'>First Choice</option>
        <option value='Second'>Second Choice</option>
        <option value='Third'>Third Choice</option>
    </select> 
    <input id="myInput1" type="text" placeholder="Form 1"></input>
    <input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>

<form id="form2">
    <select id="mySelect2">
        <option value='-2'>Form 2</option>
        <option value='First'>First Choice</option>
        <option value='Second'>Second Choice</option>
        <option value='Third'>Third Choice</option>
    </select> 
    <input id="myInput2" type="text" placeholder="Form 2"></input>
    <input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>

<form id="form3">
    <select id="mySelect3">
        <option value='-3'>Form 3</option>
        <option value='First'>First Choice</option>
        <option value='Second'>Second Choice</option>
        <option value='Third'>Third Choice</option>
    </select> 
    <input id="myInput3" type="text" placeholder="Form 3"></input>
    <input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>

Answer 2

将 select onclick 属性设置为

onclick="changePlaceHolder(this,'#myInput1');"

并将javascript函数更改为

function changePlaceHolder(dropdown, element) {
    if (jQuery(dropdown).val() == "Third") {
         jQuery(element).attr('placeholder', 'You did it correctly!');   
    } else {
         jQuery(element).at}tr('placeholder', '');   
    }
}

在 JSFiddle 中，您应该将加载行为设置为 "no wrap - in head"

完成！

Answer 3

发生了几件事。首先，删除 onClick 事件（我们不是在寻找 select 何时被单击，而是何时被更改），而是使用 jQuery 的 on 方法。现在 changePlaceHolder 可以访问 this，这是实际更改的 select 框。

见下文：

jQuery('select').on('change input', changePlaceHolder);

function changePlaceHolder() {
    //I have to use jQuery instead of $ because it is on a wordpress site
    if (jQuery(this).val() == "Third") {
        jQuery(this).next().attr("placeholder","You did it correctly!");
    } else {
        jQuery(this).next().attr("placeholder"," ");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <h2>Please pick the third option from Form 1:</h2>
<form id="form1">
    <select id="mySelect1" >
        <option value='-1'>Form 1</option>
        <option value='First'>First Choice</option>
        <option value='Second'>Second Choice</option>
        <option value='Third'>Third Choice</option>
    </select> 
    <input id="myInput1" type="text" placeholder="Form 1"/>
    <input class="dontChangeME" type="text" placeholder="Don't Change This One!"/>
</form>

其他需要注意的事项：您的 <input> 标签不需要结束标签 </input>，而是这样写 <input />。请注意，“/”结束标记。您想要编辑紧跟在 select 之后的输入，在这种情况下，您可以使用 jQuery(this).next()，它将 select 紧跟在当前 this 元素之后的元素。

Answer 4

对于您的具体情况，我不会接触源代码，而是会在脚本中定义所有功能。设置 onlick 内联事件不是一个好主意，脚本不应与内容放在一起。

我写这个脚本时考虑到您的 select 和 input 标签不必是兄弟姐妹，唯一的条件是它们属于相同的形式：

/* This way you can use $ in your Wordpress */
(function ($) {
    $('select').on('change', function(e) {
        var thisSelect = $(this);
        var thisSelectValue = thisSelect.val();
        var thisInput = thisSelect.closest('form').find('input[id^=myInput]');
        if (thisSelectValue == 'Third') {
            thisInput.attr("placeholder", "You did it correctly!");
        } else {
            thisInput.attr("placeholder", "");
        }
    });
}(jQuery));

p {
    max-width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Please pick the third option from Form 1:</h2>
<form id="form1">
    <select id="mySelect1">
        <option value='-1'>Form 1</option>
        <option value='First'>First Choice</option>
        <option value='Second'>Second Choice</option>
        <option value='Third'>Third Choice</option>
    </select> 
    <input id="myInput1" type="text" placeholder="Form 1"></input>
    <input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>

<form id="form2">
    <select id="mySelect2">
        <option value='-2'>Form 2</option>
        <option value='First'>First Choice</option>
        <option value='Second'>Second Choice</option>
        <option value='Third'>Third Choice</option>
    </select> 
    <input id="myInput2" type="text" placeholder="Form 2"></input>
    <input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>

<form id="form3">
    <select id="mySelect3">
        <option value='-3'>Form 3</option>
        <option value='First'>First Choice</option>
        <option value='Second'>Second Choice</option>
        <option value='Third'>Third Choice</option>
    </select> 
    <input id="myInput3" type="text" placeholder="Form 3"></input>
    <input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>

Answer 5

请找到适合您的工作代码：

<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
        
<script type="text/javascript">


   
function changePlaceHolder(element,target) {

    alert(element);
    
    
    if ( element == "Third") {
        jQuery(target).attr("placeholder","You did it correctly!");
    } else {
        jQuery(target).attr("placeholder","");
    }
    
}


</script>

<br><br>
    <h2>Please pick the third option from Form 1:</h2>
 
 <form id="form1">
    <select id="mySelect1" name="mySelect1" onclick="changePlaceHolder( this.value ,'#myInput1' );">
        <option value='-1'>Form 1</option>
        <option value='First'>First Choice</option>
        <option value='Second'>Second Choice</option>
        <option value='Third'>Third Choice</option>
    </select> 
    <input id="myInput1" type="text" placeholder="Form 1"></input>
    <input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>


<form id="form2">
    <select id="mySelect2">
        <option value='-2'>Form 2</option>
        <option value='First'>First Choice</option>
        <option value='Second'>Second Choice</option>
        <option value='Third'>Third Choice</option>
    </select> 
    <input id="myInput2" type="text" placeholder="Form 2"></input>
    <input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form>

<form id="form3">
    <select id="mySelect3">
        <option value='-3'>Form 3</option>
        <option value='First'>First Choice</option>
        <option value='Second'>Second Choice</option>
        <option value='Third'>Third Choice</option>
    </select> 
    <input id="myInput3" type="text" placeholder="Form 3"></input>
    <input class="dontChangeME" type="text" placeholder="Don't Change This One!"></input>
</form> 

</body>
</html>

使用 jQuery 更改 select 选项时更改占位符

Change the placeholder when the select option is changed using jQuery

javascript

forms

jquery

onchange