javascript 根据 <select> 更改 <label>

Change <label> based on <select>

提问by elithrar

I've had a dig through some similar questions (it's not a unique problem) but many only deal with the current label or changing the label to match the selection.

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

My jQuery skills are pretty average: the functions are fine, but chaining them (and knowing the browser tricks...) is a bit trickier.

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

What I'm aiming for is:

我的目标是：

• User selects "Email" or "Web" from the <select>list.
• Based on this selection, we update the <label>of the <input>below and the content of the <span>below it (some help text, which will helpfully show "http://yourdomain.com/here" or "[email protected]")

• 用户从<select>列表中选择“电子邮件”或“Web” 。
• 在此基础上选择，我们更新<label>的<input>下方的内容<span>下方（帮助文本，这将会将显示“ http://yourdomain.com/here”或“[email protected]”）

Additionally:

此外：

• Change the typeof the input field to/from type="email"or type="url". From what I can see, this might be troublesome due to IE compatibility?
• The alternative may be to .show()/.hide() two inputs (one of each type) based on the selection instead.

• type将输入字段的更改为/从type="email"或type="url"。据我所知，由于 IE 兼容性，这可能会很麻烦？
• 另一种选择可能是基于选择的 .show()/.hide() 两个输入（每种类型之一）。

JSFiddle: http://jsfiddle.net/ys9Cj/(so far: I'm stuck at getting the fields to change. Like I said, not so great with JQuery!)

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

Here's the HTML:

这是 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. [email protected]</span> // and change the contents here

回答by Dinu

There were few syntax errors in your HTML and JavaScript code. Please try below:

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

HTML:

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. [email protected]</span>
    </p>

JavaScript:

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");
            }
        });
 });  

回答by Godinall

Try this one mate http://jsfiddle.net/Godinall/Pn8HZ/

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

Text change according to your selection, easy to manage via data attr

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

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

回答by rajesh kakawat

try something like this,FIDDLE

尝试这样的事情，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");
        }
    });

});

回答by developerCK

Check this 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/

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

回答by Denis Sestari

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