显示下拉列表Laravel中所选国家的电话代码

Question

我正在尝试显示基于所选国家/地区的电话代码。比如当你尝试注册时，在选择一个国家/地区时，电话号码会同时更改。

这是我的密码。

<select class="form-control" name="country_id" required>
        <option value selected disabled>Select Country</option>
        @foreach ($countries as $country)
            <option value="{{ $country->id }}" id="shop-country">{{ $country->name }}</option>
        @endforeach
    </select>
    <div class="form-group">
        <label>Phone Number</label>
            @foreach ($countries as $country)
                <span id="phonecode">{{ $country->phonecode }}</span>
            @endforeach
    </div>

Answer 1

首先，您需要用自定义属性填充选择选项，例如phonecode

<select id="countryList" class="form-control" name="country_id" required>    
 @foreach ($countries as $country)
    <option phonecode="{{ $country->phonecode }}" 
            value="{{ $country->id }}" 
            id="shop-country">{{ $country->name }}
   </option>
 @endforeach
</select>

从pone代码文本中删除foreach循环。

<div class="form-group">
  <label>Phone Number</label>
  <span id="phonecode"></span>
</div>

现在，使用Javascript来监听选择列表上的更改事件。

<script>
 let countryList = document.getElementById("countryList") //select list with id countryList
 let phoneCode = document.getElementById('phonecode') //span with id phonecode
 countryList.addEventListener('change', function(){
  phoneCode.textContent = this.options[this.selectedIndex].getAttribute("phonecode");
 });
</script>