Question

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

我的jQuery技能非常平均：功能很好，但链接它们（并且知道浏览器技巧......）有点棘手。

我的目标是：

用户从<select>列表中选择“电子邮件”或“网络”。
根据此选择，我们会更新以下<label>的{{1}}及其下方<input>的内容（一些帮助文字，这将有助于显示“http://yourdomain.com/here }“或”stuff@yourdomain.com“）

此外：

将输入字段的<span>更改为/ type或type="email"。从what I can see开始，由于IE兼容性，这可能会很麻烦吗？
替代方案可能是.show（）/。hide（）两个输入（每种类型之一），而不是基于选择。

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

这是HTML：

type="url"

Answer 1

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 2

试试这个配偶http://jsfiddle.net/Godinall/Pn8HZ/

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

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

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

检查此fidle

        $(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/

根据<select> </select> </label>更改<label>

5 个答案: