javascript - Bootstrap 表单助手没有选择完整的国家/地区名称

Question

我添加了 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'};

我相信可以通过提供短名称来检索完整名称。但我不知道该怎么做。

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

谢谢

Answer 1

对不起，如果来晚了，但试试这个；

<select id="countries_phone1" class="form-control bfh-countries" data-country="GR"></select>

您应该将国家代码提供给data 属性。