I am unable to pass multiple value from select drop down HTML to JavaScript, what is wrong?

Question

I want to create change event function to display two values that is passed from select option.

Below is my select option code. I want to pass attribute value of data-a and data-b to JavaScript so that I can use it to pass each value to each span element.

<select id="ddlEmployee" name="xAcademicYear" class="form-control" id="exampleFormControlSelect1">
    <option data-a="2015-01-01" data-b="2016-12-31" value="2015-2016">2015-2016</option>
    <option data-a="2016-01-01" data-b="2017-12-31" value="2016-2017">2016-2017</option>
    <option data-a="2017-01-01" data-b="2018-12-31" value="2017-2018">2017-2018</option>
</select>

This is where both of value will end...

<span id="curdatestart"></span>
<span id="curdateend"></span>

This is the script where I catch the data-a and data-b and throw it again by id:

$(document).ready(function(){
    $("#ddlEmployee").change(function(){
        var xDate = document.getElementById('ddlEmployee');
        var startDate = xDate.getAttribute('data-a');
        var endDate = xDate.getAttribute('data-b');
        document.getElementById("curdatestart").innerHTML = startDate;
        document.getElementById("curdateend").innerHTML = endDate;
    });
});

Please help me...

Mamun · Accepted Answer · 2018-02-06 00:56:00Z

2

Try the following to get the selected options attribute:

Please Note: If you know that there is no HTML to insert into the element like in your case, it is always better to use textContent instead of innerHTML.

$(document).ready(function(){
  $("#ddlEmployee").change(function(){
    var slectedOption = this.options[this.selectedIndex];
    var startDate = slectedOption.getAttribute('data-a');
    var endDate = slectedOption.getAttribute('data-b');
    //document.getElementById("curdatestart").innerHTML = startDate;
    //document.getElementById("curdateend").innerHTML = endDate;
    document.getElementById("curdatestart").textContent = startDate;
    document.getElementById("curdateend").textContent = endDate;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlEmployee" name="xAcademicYear" class="form-control" id="exampleFormControlSelect1">
    <option data-a="2015-01-01" data-b="2016-12-31" value="2015-2016">2015-2016</option>
    <option data-a="2016-01-01" data-b="2017-12-31" value="2016-2017">2016-2017</option>
    <option data-a="2017-01-01" data-b="2018-12-31" value="2017-2018">2017-2018</option>';
</select>

<span id="curdatestart"></span>
<span id="curdateend"></span>

edited Feb 6, 2018 at 0:56

answered Feb 6, 2018 at 0:34

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mamun Over a year ago

@AndriSetiawan, you are most welcome. Please notice the update... thanks..

Ele · Accepted Answer · 2018-02-06 01:14:30Z

You have some issues with your code, let's analyze them :-)

You're getting the select element rather than the selected option.

 document.getElementById('ddlEmployee');
                          ^

You're using vanilla Javascript rather than jQuery (not an issue), however, with jQuery you can use the built-in functions, i.e: data attribute and innerHTML.

var startDate = xDate.getAttribute('data-a');
                      ^
var endDate = xDate.getAttribute('data-b');
                      ^
document.getElementById("curdatestart").innerHTML = startDate;
                                        ^
document.getElementById("curdateend").innerHTML = endDate;
                                        ^

Look at this code snippet with those fixes

$(document).ready(function() {
  $("#ddlEmployee").change(function() {
    var $selected = $(this).children(':selected');
    var startDate = $selected.data('a');
    var endDate = $selected.data('b');
    
    $("#curdatestart").html(startDate);
    $("#curdateend").html(endDate);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlEmployee" name="xAcademicYear" class="form-control" id="exampleFormControlSelect1">
    <option data-a="2015-01-01" data-b="2016-12-31" value="2015-2016">2015-2016</option>
    <option data-a="2016-01-01" data-b="2017-12-31" value="2016-2017">2016-2017</option>
    <option data-a="2017-01-01" data-b="2018-12-31" value="2017-2018">2017-2018</option>';
</select>

<p><span id="curdatestart"></span></p>
<span id="curdateend"></span>

See? now your logic is working and cleaner :-)

Resources

It is a better solution! great explanation as well. thanks lot

Collectives™ on Stack Overflow

I am unable to pass multiple value from select drop down HTML to JavaScript, what is wrong?

2 Answers 2

1 Comment

You have some issues with your code, let's analyze them :-)

Look at this code snippet with those fixes

Resources

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

You have some issues with your code, let's analyze them :-)

Look at this code snippet with those fixes

Resources

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related