Bootstrap表单帮助程序未选择完整的国家/地区名称

我添加了引导表单助手来列出国家和地区。起初，它根本没有使用国家名称。但我设法用jQuery检索到了国家名称，但它没有显示完整的名称。

这是表单的完整代码：

<div class="signup-form">
    <div class="container">
        <div class="row">
            <div class="col-sm-3"></div> <!-- blank column -->
            <div class="col-sm-6">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">Registration Form</h3>
                    </div>
                    <div class="panel-body">
                        <form action="signup.php" method="post" class="form-horizontal" role="form">
                            <div class="form-group">  <!-- First Name Field --> 
                                <label class="col-sm-4 ">Name</label>
                                <div class="col-sm-8">
                                    <input class="form-control" name="name" type="text" placeholder="Ener your name">
                                </div>
                            </div>                          
                            <div class="form-group">  <!-- Surname Field --> 
                                <label class="col-sm-4">Surname</label>
                                <div class="col-sm-8">
                                    <input class="form-control" name="surname" type="text" placeholder="Ener your surname ">
                                </div>
                            </div>                      
                            <div class="form-group">  <!-- Username --> 
                                <label class="col-sm-4">Username</label>
                                <div class="col-sm-8">
                                    <input class="form-control" name="username" type="text" placeholder="Enter your lowercase username ">
                                </div>
                            </div>                      
                            <div class="form-group">  <!-- Email Field --> 
                                <label class="col-sm-4">Email</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="email" name='email' type="email" placeholder="Ener your valid email ">
                                </div>
                            </div>                      
                            <div class="form-group">  <!-- Password Field --> 
                                <label class="col-sm-4">Password</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="password" name="password" placeholder="Ener your password (at least 6 digits) ">
                                </div>
                            </div>  
                            <div class="form-group">  <!-- Confirm Password Field --> 
                                <label class="col-sm-4">Confirm Password</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="password" name="confirm_password" placeholder="Retype your password ">
                                </div>
                            </div>                      
                            <div class="form-group">  <!-- Sex Field --> 
                                <label class="col-sm-4">Sex</label>
                                <div class="col-sm-8">
                                    <select name="sex">
                                        <option>Male</option>
                                        <option>Female</option>
                                    </select>
                                </div>
                            </div>  
                            <div class="form-group">  <!-- Phone Number Field --> 
                                <label class="col-sm-4">Phone No</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" name="phone_no" placeholder="Enter your phone number">
                                </div>
                            </div>  
                            <div class="form-group">  <!-- Date of birth Field --> 
                                <label class="col-sm-4">Date of Birth</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="dob" type="text" name="dob" placeholder="Enter your Date of birth">
                                </div>
                            </div>  
                            <div class="form-group">  <!-- Nationality Field --> 
                                <label class="col-sm-4">Nationality</label>
                                <div id="country_name" class="col-sm-8 bfh-selectbox bfh-countries" data-country="NG" data-flags="true" name="country">
                                    <input type="hidden" id="country" name="country" value="">                              
                                </div>
                            </div>  
                            <div class="form-group">  <!-- State of Residence Field --> 
                                <label class="col-sm-4">State of Residence </label>
                                <div class="col-sm-8 bfh-selectbox bfh-states" data-country="country_name">
                                    <input type="hidden" id="state" name="state" value="">
                                </div>
                            </div>  
                            <div class="form-group">  <!-- Sign Up Button -->   
                            <div class="col-sm-4"></div> <!-- Blank for space -->
                            <div class="col-sm-8 signup-button">
                                <button type="submit" class="btn btn-default" action="signup.php">Sign Up</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div> <!-- End of main colum -->
            <div class="col-sm-3"></div> <!-- blank column -->
        </div> <!-- End of row -->
    </div> <!-- End of container -->
</div> <!-- End of sign up -->

这是相应的jquery代码：

    $(function(){
     $("#dob").datepicker();
});

$('document').ready(function(){
  $("#dob").datepicker();
  $(document).find(".bfh-countries input[type=hidden]").attr("name","country");
  $(document).find(".bfh-states input[type=hidden]").attr("name","state");
});

我试着查看js文件。我认为它使用了关联的javascript数组，比如：

    var bootFHCountriesList = {
  'AF': 'Afghanistan',
  'AL': 'Albania',
  'DZ': 'Algeria',
  'AS': 'American Samoa',
  'AD': 'Andorra',
  'AO': 'Angola',
  'AI': 'Anguilla',
  'AQ': 'Antarctica',
  'AG': 'Antigua and Barbuda',
  'AR': 'Argentina',
  'AM': 'Armenia',
  'AW': 'Aruba',
  'AU': 'Australia',
  'AT': 'Austria',
  'AZ': 'Azerbaijan',
  'BH': 'Bahrain'};

我相信有一种方法可以通过提供简短的名称来检索完整的名称。但我不知道该怎么做。

我想把国家名称和州名称存储在数据库中。

感谢