0

I am using jQuery Datatables plugin and want to get the value of a select dropdown entered by the user and use it and then again reset it to default.

HTML:

<td>
    <form id="selectValue">
        <select class="priorityList" name="priorityList">
            <option value="">Select Priority</option>
            <option value="1">Low</option>
            <option value="2">Medium</option>
            <option value="3">High</option>
        </select>
    </form>
</td>

This particular cell is displayed on each row of the table and user can select value on each row.

Halvor Holsten Strand
  • 19,829
  • 17
  • 83
  • 99
Aditya Agarwal
  • 165
  • 1
  • 5
  • 15

2 Answers2

1
<td>
   <form id="selectValue">
         <select class="priorityList" name="priorityList1">
                 <option value="">Select Priority</option>
                 <option value="1">Low</option>
                 <option value="2">Medium</option>
                 <option value="3">High</option>
         </select>
   </form>
</td>
<td>
   <form id="selectValue">
         <select class="priorityList" name="priorityList2">
                 <option value="">Select Priority</option>
                 <option value="1">Low</option>
                 <option value="2">Medium</option>
                 <option value="3">High</option>
         </select>
   </form>
</td>

JS

$('select[name=priorityList1]').val()//in some cases, returns null
$('#priorityList1').val()//method 2 this returns null some times

$('#priorityList1 option:selected').val()//this works everytime
//for second priority list
$('select[name=priorityList2]').val()//in some cases, returns null
$('#priorityList2').val()//method 2 this returns null some times

$('#priorityList2 option:selected').val()//this works everytime

 //to change names and Id through Jquery

 $("#" + id).attr('id', 'priority' + counterIndex)
            .attr('name', 'prioty' + counterIndex);

Apparently you tried the above and it is not working.

  • Make sure you are having only one select named priorityList

  • Make sure your ids are unique

  • Only two, three, four or more radio buttons can have the same name, the rest can't: explanation

  • If you are auto-generating this form, let's say if the user enters a new row and you need to auto generate the id, you can keep count of the user's entry and change the name/id using a Js function you will have to write this by yourself. Here is an example
Community
  • 1
  • 1
Coding Enthusiast
  • 3,865
  • 1
  • 27
  • 50
  • This returns undefined – Aditya Agarwal May 22 '15 at 18:16
  • But I am showing a list in which user has to select priority for each row but one at a time – Aditya Agarwal May 22 '15 at 18:18
  • @Aditya it returns undefined because you have two stuff with the same name and you can't do that except it is a radio button http://stackoverflow.com/questions/9944559/input-attributes-that-can-have-the-same-name – Coding Enthusiast May 22 '15 at 18:23
  • What to do if I let the user to choose priority for each course he selects from the table. Also there is only one select in one row. Each row has priority dopdown but with same name. Also suggest me to choose the priority in each case – Aditya Agarwal May 22 '15 at 18:26
  • in an html file you can't have two dropdown with the same name, there will be conflict. Whether they are on different rows or different div or different span etc.. and you can always check if it is null and not use the value. but you still have to handle each priority seperately, you can use an if statement to see which one the user entered and just use the priority name of that one. BUT two dropdowns can't have the same name. – Coding Enthusiast May 22 '15 at 18:31
  • But I donot know how many courses will be there. They may be 2 or 10 or 100. They are not fixed... – Aditya Agarwal May 22 '15 at 18:33
  • write a js function that automates the naming and counts the number of forms so the id/names don't conflict. I have done something similar before and just edited my answer. – Coding Enthusiast May 22 '15 at 18:42
0

This will dynamically attach an event handler so when a select option is changed, it will set the value of the select to a variable which you can then utilise and then it will reset the value back to the first option. This will work for any number of select boxes (see fiddle). This is configurable as required:

JS

$("#table select").on("change", function(){
    // Get the value from the select box
    var value = $(this).val();

    // Do what you need to do with value        
    alert(value);

    // Reset the select back to the first option
    $(this).val("default");
});

Here's a JSFiddle that shows this in action: https://jsfiddle.net/wk5o1w4u/1/

Aegis
  • 190
  • 1
  • 11