Question

我有两个单选按钮，第一个是男性，第二个是女性。

如果用户单击该男性单选按钮，我需要使用提交按钮显示一些男性名称列表。如果用户点击女性单选按钮，我只需要通过提交按钮显示女性名字列表。

当我打开此页面时，它应该只显示两个基于选择下拉列表的单选按钮应该带有提交按钮。

例如用户选择男性，在该下拉列表中用户选择raju，agil，gowri，当用户单击该提交按钮时，我需要在控制台性别中显示所选男性名称。

有人帮助我继续前进我附上了我的代码：

$(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>

Answer 1

Angular的方式是使用两个radio按钮，以及通过select创建的option和ng-repeat。这样做，您只需根据所选的性别更新名称选项：

http://jsfiddle.net/h2rmq2zL/

Answer 2

你必须检查单选按钮的值。然后，您可以使用显示所需的div ng-show =＆＃34; favoriteBeatle ==＆＃39;男性＆＃39;＆＃34;要么 ng-show =＆＃34; favoriteBeatle ==＆＃39;女性＆＃39;＆＃34;

然后再次提交检查输入的值以显示所需的信息。

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

这是一个jsfiddle

http://jsfiddle.net/6b8vrjnb/

如何使用AngularJS制作基于单选按钮值的下拉列表？

2 个答案: