Hi mahesh213,
Set the width property of the select DropDownList.
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult GetCountry()
{
List<Country> countries = new List<Country>();
countries.Add(new Country { COI_Id = 1, COI_Name = "Country 1" });
countries.Add(new Country { COI_Id = 2, COI_Name = "Country 2" });
countries.Add(new Country { COI_Id = 3, COI_Name = "Country 3" });
return Json(countries, JsonRequestBehavior.AllowGet);
}
public ActionResult GetState(int id)
{
List<State> states = new List<State>();
states.Add(new State { COI_Id = 1, STI_Id = 1, STI_Name = "State 1" });
states.Add(new State { COI_Id = 1, STI_Id = 2, STI_Name = "State 2" });
states.Add(new State { COI_Id = 3, STI_Id = 3, STI_Name = "State 3" });
states = states.Where(x => x.COI_Id == id).ToList();
return Json(states, JsonRequestBehavior.AllowGet);
}
public class Country
{
public int COI_Id { get; set; }
public string COI_Name { get; set; }
}
public class State
{
public int STI_Id { get; set; }
public string STI_Name { get; set; }
public int COI_Id { get; set; }
}
}
HTML
<html ng-app="myApp">
<head>
<title>Index</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.directive("select2", function ($timeout, $parse) {
return {
restrict// Code goes here
: 'AC',
require: 'ngModel',
link: function (scope, element, attrs) {
console.log(attrs);
$timeout(function () {
element.select2();
element.select2Initialized = true;
});
var refreshSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.trigger('change');
});
};
var recreateSelect = function () {
if (!element.select2Initialized) return;
$timeout(function () {
element.select2('destroy');
element.select2();
});
};
scope.$watch(attrs.ngModel, refreshSelect);
if (attrs.ngOptions) {
var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
// watch for option list change
scope.$watch(list, recreateSelect);
}
if (attrs.ngDisabled) {
scope.$watch(attrs.ngDisabled, refreshSelect);
}
}
};
});
app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {
$scope.mahesh = false;
GetCountries();
function GetCountries() {
$scope.countries = [];
$http({
method: 'Get',
url: '/Home/GetCountry/'
}).success(function (data, status, headers, config) {
$scope.countries = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.GetStates = function () {
var country = $scope.COI_Name;
$http({
method: 'Get',
url: '/Home/GetState/',
params: { id: country }
}).success(function (data, status, headers, config) {
$scope.states = data;
}).error(function (data, status, headers, config) {
$scope.message = 'Unexpected Error';
});
}
$scope.AddPartyDiv = function () {
$scope.mahesh = true;
GetCountries();
$scope.Action = "Add";
}
} ]);
</script>
</head>
<body ng-controller="myCntrl">
<div class="container">
<div><br /><br /><br />
<div id="wrapper" class="clearfix" ng-show="mahesh">
<div class="well">
<div class="row">
<div class="col-md-3">
<label for="COI_Name">
Country</label>
<select style="display: inline; width: 252px;" class="form-control input-sm" select2=""
name="COI_Name" id="COI_Name" ng-model="COI_Name" ng-change="GetStates()" containercssclass="all"
ng-options="c.COI_Id as c.COI_Name for c in countries" ng-disabled="disabled">
<option value="">Select Country</option>
</select>
</div>
<div class="col-md-3">
<label for="STI_Name">
State</label><br />
<select style="display: inline; width: 252px;" select2="" ng-model="STI_Name" ng-disabled="!states"
name="STI_Name" class="form-control input-sm" ng-options="s.STI_Id as s.STI_Name for s in states">
<option value="">-- Select State --</option>
</select>
</div>
</div>
</div>
</div>
<button class="btn btn-success btn-sm " ng-click="AddPartyDiv();">Add Party</button>
</div>
</div>
</body>
</html>
Screenshot
