简体   繁体   中英

Multiple select option selected will be view in another html element using javascript or jquery

I have a multiple select option on html like this :

 <div class="control-group">
    <label class="control-label" for="selectError1">Ditujukan untuk :</label>
     <div class="controls">
          <select id="email" multiple data-rel="chosen" class="input-xlarge" name="email[]">
              <?php
                  foreach ($atasan as $data) {
                      echo "<option value='" . $data['email'] . "'>" . $data['email'] . "</option>";
                  }
            ?>

           </select>
       </div>
</div>

My goal is, when user selected an or any option, the option that selected will be view in another html element like <p id='emailSend'>This is the email : email1, email2... so on</p .

I am newbie in jquery. I guess 'on change' or change can do this.

This is the jquery's code:

$(document).ready(function() {
    $('#emailSend').hide();

    $('email').change(function(){
        //any idea ???
    });

}

EDIT I was wondering to increase my ability, how should I do if I want to append it on a input text like

<input type="text" id="emailSend" name="emailSend">

So, the jquery looked like this :

$("#email").change(function() {
        var elements = $("#email option:selected").length;

        $(".emailSend").html("");
        $.each($("#email option:selected"), function(index, element) {
            $(".emailSend").val($(this).html());
            if (index < elements - 1) {
                $(".emailSend").append(", ");
            }
        });
    });

What you can do is :

$("#email").change(function() {
    var elements = $("#email option:selected").length;
    $("#emailSend").html("");
    $.each($("#email option:selected"), function(index, element){            
        $("#emailSend").append($(this).html());
        if (index < elements-1) {
           $("#emailSend").append(", ");
        }
    });
});

With emailSend being your block containing all the emails. Note that this solution allows you to handle multiple values.

EDIT : grammar :(

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM