引导表单助手未选择完整的国家/地区名称

Posted 2023-02-22

【中文标题】引导表单助手未选择完整的国家/地区名称

【英文标题】：Bootstrap form helper not picking complete country name

【发布时间】：2016-02-11 11:03:53

【问题描述】：

我添加了引导表单助手来列出国家及其州。 最初，它根本没有选择国名。但是我设法用 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';

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

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

谢谢

【问题讨论】：

您可以通过使用键作为索引从 javascript 数组中获取名称，例如 bootFHCountriesList['AF'] 以获取“阿富汗”。但我真的不明白你的问题在哪里。

【参考方案1】：

抱歉，如果来晚了，请试试这个；

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

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