javascript - Change <label> based on <select> - Stack Overflow

admin管理员组

文章数量:1388812

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.

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 "" or "[email protected]")

Additionally:

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

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

Here's the 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

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.

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./here" or "[email protected]")

Additionally:

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

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

Here's the 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

• javascript
• jquery
• html

Share Improve this question Follow edited May 23, 2017 at 11:52 CommunityBot 111 silver badge asked Nov 18, 2013 at 7:20 elithrarelithrar 24.4k1111 gold badges9090 silver badges107107 bronze badges 5

• 4 share the jquery code u have used for the above scenario.. – codebreaker Commented Nov 18, 2013 at 7:23
• 4 to make people answer ur question ,you have try and simplify your question..the first impression i get after just looking at the question is its too long to go through..shorter and precise the question..better response u will get.. – HIRA THAKUR Commented Nov 18, 2013 at 7:24
• @Onaseriousnote your display name made me smile :) – codingrose Commented Nov 18, 2013 at 7:26
• 2 Try to create a JSFiddle, it will much easiler to understand, show what you tried and get a answer – Satpal Commented Nov 18, 2013 at 7:26
• I've added a (partial!) JSFiddle. @Onaseriousnote - I've tried to be specific here, as I have a few requirements. Saves me having to ask a chain of questions! :) – elithrar Commented Nov 18, 2013 at 8:12

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Try this one mate http://jsfiddle/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();

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

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:

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

try something like this,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");
        }
    });

});

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/ys9Cj/18/

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

本文标签： javascriptChange ltlabelgt based on ltselectgtStack Overflow