Question

我在网页上的不同位置有一个具有相同表单的网站。当我更改选择选项时，我希望能够在文本输入更改中添加占位符。我有一个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>

在这个例子中，当我选择第三个选项时，我希望在输入中使用id myInput更改占位符。

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

非常感谢任何帮助！

Answer 1

将选择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中，你应该将加载行为设置为＆＃34;没有换行头＃34;

enter image description here

完成！

Answer 2

向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 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 />一样编写代码。请注意，“/”结束标记。您希望在选择后立即编辑输入，在这种情况下，您可以使用jQuery(this).next()来选择紧跟当前this元素的元素。

Answer 4

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

我写了这个脚本，记住你的select和input标签不一定是兄弟姐妹，唯一的条件是它们都属于同一种形式：

＆＃13;

/* 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));

＆＃13;

p {
    max-width: 500px;
}

＆＃13;

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

＆＃13;

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更改选择选项时更改占位符

5 个答案: