Autocomplete dropdown based on radio button checked

Question

5.00/5 (1 vote)

See more:

I have a dropdown list and two Jquery radio buttons..dropdown list is populated with players names like

ASP.NET

<div class="row">
    <label class="col-md-5">Players Total</label>
    <div class="col-md-7">
        <asp:DropDownList ID="ddlPlayers" runat="server" CssClass="form-control">
            <asp:ListItem Text="--Select--" Value=""></asp:ListItem>
            <asp:ListItem Text="Sehwag" Value="Sehwag"></asp:ListItem>
            <asp:ListItem Text="Kohli" Value="Kohli"></asp:ListItem>
            <asp:ListItem Text="Sachin" Value="Sachin"></asp:ListItem>
            <asp:ListItem Text="ABD" Value="ABD"></asp:ListItem>
            <asp:ListItem Text="Miller" Value="Miller"></asp:ListItem>
            <asp:ListItem Text="Quinton d" Value="Quinton d"></asp:ListItem>
        </asp:DropDownList>
        <label id="lblPlayer" style="display: none"></label>
    </div>
</div>

and two radio buttons

HTML

 <div class="row">
    <label class="col-sm-5"></label>
    <div class="col-sm-7">
     <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-6">
                <input type="radio" id="rdoIndia" name="Player" />
                <label for="rdoIndia">India</label>
            </div>
            <div class="col-sm-6">
                <input type="radio" id="rdoSa" name="Player" />
                <label for="rdoSa">South Africa</label>
            </div>
        </div>
    </div>
</div>

When i check one radio button india all the india players should be populated in the same dropdown above.
when i check another radio button all the South africa players should be populated in the same dropdown clearing all the previous..

the total code i used is front end, so using front end only i need to autocomplete drop down based on radio button selection

please help..?
any idea..?

What I have tried:

JavaScript

var options = $('#<%=ddlPlayers.ClientID%>').html();

$('#rdoIndia').click(function (e) {
    var text = $('#<%=ddlPlayers.ClientID%>').text();
    alert(text);
  //  $('#<%=ddlPlayers.ClientID%>').html(options);
  //  if (text == "--Select--") return;
    $('#<%=ddlPlayers.ClientID%>').append('<option>' + text.substr(0, 3).val() + '</option>');
  
    alert("Hi");
});

Posted 28-Jul-17 1:29am

Mahesh2223

Updated 28-Jul-17 9:01am

Graeme_Grant

v3

Add a Solution

Comments

Graeme_Grant 28-Jul-17 7:40am

I can see that you have been posting many questions here. Please take the time to learn how to correctly format your posts - Code Project Quick Answers FAQ[^]. You will find that people will want to help you more...

Mahesh2223 28-Jul-17 7:41am

Yes Sure.. Thanks

Mahesh2223 28-Jul-17 7:42am

I am a beginner so i am getting lot of doubts while doing the task, so i am posting a lot.

Graeme_Grant 28-Jul-17 7:48am

We were all beginners once...

There are some great videos on youtube that are good for learning - I do it all the time. SitePoint also has some great books and courseware that you can take advantage of. Then there is Google search - a tonne of examples & solutions are waiting for you on HTML, CSS, jquery, & javascript... all you do is type your questions into Google search! ;)

Mahesh2223 28-Jul-17 7:58am

Many answers for my questions i did it myself , thanks for your advice i follow it, all the questions which i am posting are which i am doing small mistakes, if i identify that before posting i could easily get answers myself for my questions..anyways thanks for your advice..

Graeme_Grant 28-Jul-17 8:00am

Do you know how to use the debugger? This should make life a lot easier... How to debug (only) JavaScript in Visual Studio? - Stack Overflow[^]

Mahesh2223 28-Jul-17 8:01am

Yes i know it how to use..

Graeme_Grant 28-Jul-17 8:05am

Part of learning to program is to learn how to debug and solve problems & mistakes. The more that you do it, the better that you become. You won't learn if you "always" expect others to do it for you... I'm not saying don't ask for help, only saying to make sure that you try & research first before asking.

Mahesh2223 28-Jul-17 8:11am

ok ok sure

2 solutions

Solution 2

Hi,

See if this example, help you.

ASPX

ASP.NET

<asp:RadioButtonList ID="rdoCountry" runat="server" AutoPostBack="True" OnSelectedIndexChanged="rdoCountry_SelectedIndexChanged">
   <asp:ListItem Value="rdoIndia">India</asp:ListItem>
   <asp:ListItem Value="rdoSa">South Africa</asp:ListItem>
</asp:RadioButtonList>

Code-Behind

C#

private DataTable SelectAllPlayer(string play)
{
    DataTable dt = new DataTable();

    //select your record where you key is equal play

    return dt;
}

protected void rdoCountry_SelectedIndexChanged(object sender, EventArgs e)
{
    this.ddlPlayers.Items.Clear();
    DataTable dt = null;
    switch (this.rdoCountry.SelectedItem.Value)
    {
        case "rdoIndia":
            {
                //find all india player
                dt = this.SelectAllPlayer("india");
                break;
            }
        case "rdoSa":
            {
                //find all south africa register
                dt = this.SelectAllPlayer("SouthAfrica");
                break;
            }

    }

    //fill dropdownlist
    this.ddlPlayers.DataSource = dt;
    this.ddlPlayers.DataBind();
}

Posted 28-Jul-17 8:41am

Sheila Pontes

Updated 28-Jul-17 9:44am

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2017-07-28T08:06:00

try like this

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title></title>

     <script>
         var items = [{ name: 'Sehwag', country: 'India' },
         { name: 'Kohli', country: 'India' },
         { name: 'Sachin', country: 'India' },
         { name: 'ABD', country: 'Sa' },
         { name: 'Miller', country: 'Sa' },
         { name: 'Quinton d', country: 'Sa' }, ];
         $(function () {
             $('[name="Player"]').click(function (a, b) {
                 $('#ddlPlayers option').remove();
                 var id = a.target.id;
                 var options = [];
                 if (id == 'rdoIndia' && a.target.checked) {
                     options = getItems('India')
                 }
                 else if (id == 'rdoSa' && a.target.checked) {
                     options = getItems('Sa')
                 }
                 $('#ddlPlayers').append(options.join(''));
                 debugger;
             });
         });

         function getItems(country) {
             var options = [];
             for (var i = 0; i < items.length; i++) {
                 var item = items[i];
                 if (item.country == country) {
                     options.push('<option value="' + item.name + '"> ' + item.name + ' </option>');
                 }
             }
             return options;
         }
     </script>
</head>
<body>

    India   <input type="radio" id="rdoIndia" name="Player" />
    South Africa <input type="radio" id="rdoSa" name="Player" />

    <select id="ddlPlayers">
          <option>select</option>
    </select>

    

</body>
</html>