how to make radio button value based dropdown using AngularJS?

Question

I have two radio buttons, first one is male, 2nd one is female.

If user click that male radio button I need to show some list of male names with submit button . If user click female radio button I need to show only list of female names with submit button.

When I open this page it should show only two radio buttons based on selection only dropdown should come with submit button.

For example user select male, in that dropdown list user selected raju, agil, gowri, when user click that submit button I need to show in console gender with selected male names.

Someone help me out to move forward I have enclosed my code :

$(function() {
$('#male').multiselect({
includeSelectAllOption: true
});
$('#female').multiselect({
includeSelectAllOption: true
});
});

function MyCtrl($scope) {
    $scope.gender = [{
        name: "Male"
    }, {
        name: "Female"
    }];
    
    $scope.submit =function()
	{
	alert($('#male').val());
	alert($('#female').val());
	}
    
    
}

<style type='text/css'>
    .multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}
 </style>    
 <script type='text/javascript' src='https://code.jquery.com/jquery-2.0.2.js'></script>
    <script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
    <link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css">
    <script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.js"></script>

<body ng-app>
  <div ng-controller="MyCtrl">
    <p>Select your Gender</p>
	<form data-ng-submit="submit()">
    <ul>
        <li ng-repeat="person in gender">
            <label>{{person.name}}
                <input type="radio" ng-model="$parent.favoriteBeatle"
                name="name" value="{{person.name}}" required="required"/>
            </label>
        </li>
    </ul>
	<div style="padding:20px">

<select id="male" multiple="multiple">

<option value="gowri">Gowri</option>

<option value="agil">Agil</option>

<option value="raju">Raju</option>

<option value="viswanath">Viswanath</option>

<option value="duruwan">Duruwan</option>



</select><br /><br />

<input type="submit" id="btnget" value="Get Selected Values" />

</div>
<div style="padding:20px">

<select id="female" multiple="multiple">

<option value="aarani">Aarani</option>

<option value="ajitha">Ajitha</option>

<option value="kanul">Kanul</option>





</select><br /><br />

<input type="submit" id="btnget" value="Get Selected Values" />

</div>
	</form>
    
</div>
  
</body>

<!DOCTYPE html>
<html>
<head>

   <script type='text/javascript' src='https://code.jquery.com/jquery-2.0.2.js'></script>
    <script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
    <link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
    <link rel="stylesheet" type="text/css" href="https://davidstutz.github.io/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css">
    <script type='text/javascript' src="https://davidstutz.github.io/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.js"></script>


 <style type='text/css'>
    .multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}
 </style>
<script type='text/javascript'>//<![CDATA[
$(function() {
$('#male').multiselect({
includeSelectAllOption: true
});
$('#female').multiselect({
includeSelectAllOption: true
});
});
</script>
<script type='text/javascript'>//<![CDATA[
function MyCtrl($scope) {
    $scope.gender = [{
        name: "Male"
    }, {
        name: "Female"
    }];

    $scope.submit =function()
    {
    alert($('#male').val());
    alert($('#female').val());
    }


}
</script>

</head>
<body ng-app>
  <div ng-controller="MyCtrl">
    <p>Select your Gender</p>
    <form data-ng-submit="submit()">
    <ul>
        <li ng-repeat="person in gender">
            <label>{{person.name}}
                <input type="radio" ng-model="$parent.favoriteBeatle"
                name="name" value="{{person.name}}" required="required"/>
            </label>
        </li>
    </ul>
    <div style="padding:20px">

<select id="male" multiple="multiple">

<option value="gowri">Gowri</option>

<option value="agil">Agil</option>

<option value="raju">Raju</option>

<option value="viswanath">Viswanath</option>

<option value="duruwan">Duruwan</option>



</select><br /><br />

<input type="submit" id="btnget" value="Get Selected Values" />

</div>
<div style="padding:20px">

<select id="female" multiple="multiple">

<option value="aarani">Aarani</option>

<option value="ajitha">Ajitha</option>

<option value="kanul">Kanul</option>





</select><br /><br />

<input type="submit" id="btnget" value="Get Selected Values" />

</div>
    </form>

</div>

</body>

</html>

not like this i have given my code please check that

its me
– its me

2015-09-08 07:53:15 +00:00
Commented Sep 8, 2015 at 7:53 — its me
– its me, Commented Sep 8, 2015 at 7:53

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

you have to check what value the radio button has. You can then show only the div you want by using ng-show="favoriteBeatle == 'Male'" or ng-show="favoriteBeatle == 'Female'"

Then on submit check again the value of the input to display the message you want.

if($scope.favoriteBeatle == 'Male') {
    alert($('#male').val());
} else {
    alert($('#female').val());
}

Here is a jsfiddle

http://jsfiddle.net/6b8vrjnb/

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 8, 2015 at 8:06

Manos Pasgiannis

1,8031 gold badge20 silver badges32 bronze badges

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

4 Comments

its me Over a year ago

i need gender value also how can i get gender value with selected names

its me Over a year ago

i have put in that submit function alert($scope.$parent.favoriteBeatle); its showing undefined

Manos Pasgiannis Over a year ago

Don't use $scope.$parent.favoriteBeatle. It is $scope.favoriteBeatle

Manos Pasgiannis Over a year ago

Because the ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope. With $parent you refer to the parent scope from inside the ngRepeat directive. This is $scope in your controller

DonJuwe · Accepted Answer · 2015-09-08 07:58:08Z

2

The Angular way would be to use two radio buttons, combined with a select and options which are created via ng-repeat. Doing so, you can just update the name options based on the selected gender:

http://jsfiddle.net/h2rmq2zL/

answered Sep 8, 2015 at 7:58

DonJuwe

4,5634 gold badges37 silver badges60 bronze badges

4 Comments

its me Over a year ago

after user select gender i need multiple select dropdown values with one submit button to grab all selected values

SaiGiridhar Over a year ago

I have updated his pluncker link to support multiple selection from the dropdown values jsfiddle.net/hL04y1fL/1

its me Over a year ago

thanks yar its working but checkbox and submit button missing

DonJuwe Over a year ago

well, you were asking for the very problem I gave you a solution for. you were not asking for building your form.

Collectives™ on Stack Overflow

how to make radio button value based dropdown using AngularJS?

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related