CODEWITHSUNDEEP
javascriptjqueryhtmlsharepoint
Ron Miller
Ron Miller

Reputation: 23

Make Dropdown list value equal value of other dropdown list on change

Pleas Help me. I'm trying to write what should be a simple jQuery string that changes the value of the status dropdown to = the Leadership Action Dropdown ONLY when the value the value of the leadership dropdown changes. Iv been fiddling with this for about an hour now and cant seem to get it to function. Also the HTML can NOT be modified so adding an onChange attrib is not an option. I must be able to implement the solution by simply adding the JS to the page. Here is the code I have so far. Any help is greatly appreciated. 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <script>
 function myFunction() {
 $("#leadershipAtc").change(function () {

     document.getElementById('status').text = $('option:selected', this).text();
 });
 }
 </script>

 <body>

 Status : 
 <select id="status">
   <option value="A">A
   <option value="B">B
   <option value="C">C
   <option value="D">D
</select>

<p></p>

 Leadership Action : 
 <select id="leadershipAct">
   <option value="A">A
   <option value="B">B
   <option value="C">C
   <option value="D">D
 </select>

 </body>
 </html>

Upvotes: 0

Views: 1158

Answers (2)

Ron Miller
Ron Miller

Reputation: 23

Thank you guys for your post, they were most helpful. However to make this work I SharePoint I had to take a bit of a different approach, not quite sure why. Anyway here is the code I was able to make work inside of SharePoint 2013.

<script type="text/javascript">
$(function() {

$("#leadershipAct").change(function() {
if ($('option:selected', this).text() == "A") {
    $('#status').val($(this).val());
} else if ($('option:selected', this).text() == "B") {
    $('#status').val($(this).val());
    } else if ($('option:selected', this).text() == "C") {
    $('#status').val($(this).val());
} else if ($('option:selected', this).text() == "D") {
    $('#status').val($(this).val());
} else {
}
});
});
</script>

Upvotes: 0

Takit Isy
Takit Isy

Reputation: 10081

Is that the kind of thing you want to achieve? 

// You don't need to put the code in a function.
// Btw, in your code, your function was never called!
$("#leadershipAct").on('change', function() {
  // Taking the .val() of this select, and put it in the status one.
  $('#status').val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  Status :
  <select id="status">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
  </select>

  <p></p>

  Leadership Action :
  <select id="leadershipAct">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
  </select>

</body>

Hope it helps.

Upvotes: 1

Related Questions