根据 <select> 改变 <label>

Question

我已经深入研究了一些类似的问题（这不是一个独特的问题），但许多只处理当前标签或更改标签以匹配选择。

我的 jQuery 技能相当一般：函数很好，但是链接它们（并且知道浏览器技巧......）有点棘手。

我的目标是：

• 用户从<select> 列表中选择“电子邮件”或“Web”。
• 基于此选择，我们更新下方<input> 的<label> 及其下方<span> 的内容（一些帮助文本，将有助于显示“http://yourdomain.com/here”或“stuff@yourdomain. com")

另外：

• 将输入字段的type 更改为type="email" 或type="url"。来自what I can see，这可能是因为IE兼容问题？
• 替代方法可能是 .show()/.hide() 两个输入（每种类型一个），而不是基于选择。

JSFiddle：http://jsfiddle.net/ys9Cj/（到目前为止：我一直在改变字段。就像我说的，JQuery 不太好！）

这是 HTML：

    <label for="method">How?</label>
    <select id="method" name="method" required>
      <option name="method"  value="email">Email</option>
      <option name="method" value="web">Web</option>
    </select>
    <span class="help-text">The web, or email?</span>
  </label>

  <label for="contact">Email Address</label> // We want to update this (but not strictly with the value from the <select>
  <input type="email" name="contact" id="contact" value="" maxlength="255"> // and the type here, or otherwise .show() or .hide() this and show an alternative field with a different name=""
  <span class="help-text">e.g. stuff@yourdomain.com</span> // and change the contents here

Answer 1

试试这个朋友http://jsfiddle.net/Godinall/Pn8HZ/

根据您的选择更改文本，通过数据属性轻松管理

$("#method").change(function() {
    $('#help-text').text($('option:selected').attr('data-content'));
    $('#example-text').text($('option:selected').attr('data-example'));
}).change();

Answer 2

您的 HTML 和 JavaScript 代码中几乎没有语法错误。请尝试以下操作：

HTML：

<p>
<label for="method">How?</label>
<select id="method" name="method" required>
    <option value="email">Email</option>
    <option value="web">Web</option>
</select> <span class="help-text">The web, or email?</span>
</p>
<p>
<label id="contact-label" for="contact">Email Address</label>
<input type="email" name="contact" id="contact" value="" maxlength="255"> <span class="help-text">e.g. stuff@yourdomain.com</span>
    </p>

JavaScript：

$(document).ready(function(){
    $('#method').change(
        function () {
            var method = $('option:selected', this).text();
            if (method == "Email") {
                $('#contact-label').text("Email Address");
            } else if (method == "Web") {
                $('#contact-label').html("App URL");
            }
        });
 });  

Answer 3

试试这样的，FIDDLE

$(document).ready(function () {
    $('#method').change(
    function () {
        var method = $('option:selected').val();

        if (this.value == "email") {
            $('#contact').text("Email Address");
        } else if (this.value == "web") {
            $('#contact').text("Web Address");
        }
    });

});

Answer 4

检查这个文件

        $(document).ready(

    $('#method').bind('change',
      function(){
      var method = $('option:selected',this).text();
      alert(method);
      if (method == "Email") {
          $('#contact-label').text("Email Address"); 
     $('#help-change').text("Email Address"); 
          $('#contact').attr('type','email');

      } else if (method == "Web") {
          $('#contact-label').text("App URL"); 
          $('#help-change').text("Web Address"); 
          $('#contact').attr('type','url');
      }

      }
      )

  );

http://jsfiddle.net/ys9Cj/18/

Answer 5

$("#method").change(function () {
    $('#contact').html(($(this).find(':selected').html() == 'Email' ? 'Email Address' : 'Web Address') + ':');       
});