Changes values in JavaScript based on radio buttons selections

Question

In my scenario, I want to change the value of a table by using radio button selection.

Code for radio button

@Html.RadioButtonFor(m => m.Doctype1, new {
  id = "doctype1", @onclick = "DocTypeSelect()"
}) @Html.Label("largedocs")

@Html.RadioButtonFor(m => m.Doctype2, new {
  id = "doctype2", @onclick = "DocTypeSelect()"
}) @Html.Label("SmallDocs")

@Html.RadioButtonFor(m => m.Doctype3, new {
  id = "doctype3", @onclick = "DocTypeSelect()"
}) @Html.Label("MediumDocs")

@Html.RadioButtonFor(m => m.Doctype4, new {
  id = "doctype4", @onclick = "DocTypeSelect()"
}) @Html.Label("VerySmallDocs")

I wrote a logic for hide other dropdown values. By using I'm able to change the dropdown and hiding other 3 buttons.

 <td id="DocTypes1">
    @Html.DropDownlistfor(m => m.Doctype, new selectlist(m.BigDocs, "Value", "Text", m.BigDocs), new {
      @id = "SelectDocType", 
      @onchange = "ChangeTypes()"
    })

 <td id="DocTypes2">
    @Html.DropDownlistfor(m => m.Doctype, new selectlist(m.BigDocs, "Value", "Text", m.BigDocs), new {
      @id = "SelectDocType", 
      @onchange = "ChangeTypes()"
    })

 <td id="DocTypes3">
    @Html.DropDownlistfor(m => m.Doctype, new selectlist(m.BigDocs, "Value", "Text", m.BigDocs), new {
      @id = "SelectDocType", 
      @onchange = "ChangeTypes()"
    })

 <td id="DocTypes4">
    @Html.DropDownlistfor(m => m.Doctype, new selectlist(m.BigDocs, "Value", "Text", m.BigDocs), new {
      @id = "SelectDocType", 
      @onchange = "ChangeTypes()"
    })

In Javascript, If a particular value is selected I want to get that value and and display in a table view of format.

The existing code is always getting the one type of doc value only. I don't know why???

funtion ChangeTypes(){
var docId=$("SelectDocType").val();
var docType=$("SelectDocType option:selected").text();
if(SelectDocType !="")
{

//my logic

}

actually I need to get the data when a user change the dropdown values. Help me to solve this..

Thanks in advance

Answer 1

if you need to find all the dropdowns then:

$('select[id^="SelectDocType"]')

should give you all the dropdowns whos id's match, although its no best practice for elements to share the same id, if you can give them a unique id abut the same class then you can find them all using the class name

$('.myclass')

you will need to use a for each loop then to get the values out of each element item

$( "select" ).each(function( index ) {
    console.log( index + ": " + $( this ).val() );
})

but if you want to make life easier for yourself why not pass the value to the function like so:

 <td id="DocTypes2">
    @Html.DropDownlistfor(m => m.Doctype, new selectlist(m.BigDocs, "Value", "Text", m.BigDocs), new {
      @id = "SelectDocType", 
      @onchange = "ChangeTypes(this.value)"
    })
...
funtion ChangeTypes(val){
   console.log(val);
}

I hope this helps