Amigos que tal, como podría pasar el id
de un option
a un javascript
para que este actualice mediante un style
la propiedad de background-position
en un span
(el estilo posiciona cierta parte de una imagen que vendría ser una bandera). solo he logrado capturar el value
y enviarlo al input. pero me falta la imagen
, que también cambie.
$(function() {
$(document).on('change', '#mySelect', function() { //detectamos el evento change
var value = $(this).val(); //sacamos el valor del select
$('#phone').val(value); //le agregamos el valor al input (notese que el input debe tener un ID para que le caiga el valor)
});
});
.bp_form__field {
margin-bottom: 10px;
}
div {
display: block;
}
.bp_form__field__label {
display: block;
font-weight: bold;
margin-bottom: 2px;
}
label {
cursor: default;
}
.bp_form__field--phone .c-input-phone-country {
display: inline-block;
}
.c-input-phone-country {
position: relative;
z-index: 1;
}
.c-input-phone-country__country {
position: absolute;
top: 1px;
left: 1px;
width: 32px;
bottom: 1px;
z-index: 2;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
-webkit-appearance: none;
appearance: none;
}
select:not(:-internal-list-box) {
overflow: visible !important;
}
select {
border-radius: 0px;
border-color: rgb(169, 169, 169);
}
select {
-webkit-appearance: menulist;
box-sizing: border-box;
align-items: center;
white-space: pre;
-webkit-rtl-ordering: logical;
color: black;
background-color: white;
cursor: default;
border-width: 1px;
border-style: solid;
border-color: initial;
border-image: initial;
}
select {
border-radius: 5px;
}
input,
textarea,
select,
button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
input,
textarea,
select,
button,
meter,
progress {
-webkit-writing-mode: horizontal-tb !important;
}
input,
textarea,
select,
button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
input,
textarea,
select,
button,
meter,
progress {
-webkit-writing-mode: horizontal-tb !important;
}
.bp_form__field--phone .c-input-phone-country .c-input-phone-country__flag {
border-radius: 4px 0 0 4px;
background-color: transparent;
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
}
.c-input-phone-country__flag {
position: absolute;
top: 1px;
left: 1px;
width: 32px;
bottom: 1px;
z-index: 1;
background-color: #e8e8e8;
}
.c-input-phone-country__flag:before {
position: absolute;
content: '\25BC';
top: 50%;
left: 23px;
margin-top: -3px;
font-size: 6px;
}
element.style {
background-position: 0px -300px;
}
.c-input-phone-country__flag__img {
position: absolute;
top: 50%;
left: 2px;
width: 18px;
height: 16px;
margin-top: -9px;
background: url(http://subirimagen.me/uploads/20190112010658.png) no-repeat;
background-position: 0 25px;
display: block;
}
.bp_form__field--phone .c-input-phone-country #phone {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.bp_input_text {
border-radius: 4px;
padding: 6px 25px 6px 2px;
zoom: 1;
height: 19px;
line-height: 23px;
}
input {
padding-left: .3em;
}
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input,
textarea,
select,
button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 13.3333px Arial;
}
input,
textarea,
select,
button,
meter,
progress {
-webkit-writing-mode: horizontal-tb !important;
}
.c-input-phone-country__input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 35px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div data-component="" class="bp_form__field bp_form__field--phone ">
<label for="phone" class="bp_form__field__label">
Teléfono / movil
</label>
<div data-component="input-phone-country" class="c-input-phone-country" data-phone-country-default="pe">
<select id="mySelect" class="c-input-phone-country__country" tabindex="-1" data-phone-country="">
<option value="+ 971" id="25">Emiratos Árabes Unidos</option>
<option value="+ 93" id="50">Afganistán</option>
<option value="+ 1268" id="75">Antigua y Barbuda</option>
<option value="+ 1264" id="100">Anguila</option>
<option value="+ 355" id="125">Albania</option>
<option value="+ 374" id="150">Armenia</option>
<option value="+ 244" id="200">Angola</option>
<option value="+ 672" id="225">Antártida</option>
<option value="+ 54" id="250">Argentina</option>
<option value="+ 1684" id="275">Samoa Americana</option>
<option value="+ 43" id="300">Austria</option>
<option value="+ 61" id="325">Australia</option>
<option value="+ 297" id="350">Aruba</option>
<option value="+ 994" id="400">Azerbaiyán</option>
<option value="+ 387" id="425">Bosnia y Herzegovina</option>
<option value="+ 1246" id="450">Barbados</option>
<option value="+ 880" id="475">Bangladesh</option>
<option value="+ 32" id="500">Bélgica</option>
<option value="+ 226" id="525">Burkina Faso</option>
<option value="+ 359" id="550">Bulgaria</option>
<option value="+ 973" id="575">Bahréin</option>
<option value="+ 257" id="600">Burundi</option>
<option value="+ 229" id="625">Benín</option>
</select>
<span class="c-input-phone-country__flag"><span class="c-input-phone-country__flag__img" data-phone-flag="" style="background-position: 0px -250px;"></span></span>
<input id="phone" class="bp_form__field__input bp_input_text bp_phone_input_with_help_message
c-input-phone-country__input
" type="text" name="phone" required="" value="" size="20" data-phone-input="" aria-describedby="bp_form_phone_msg" placeholder="+54">
</div>
</div>
<br>
<strong>la imagen:</strong> es una imgen, especificada en el css
<br>
<img src="http://subirimagen.me/uploads/20190112010658.png" alt="">
lo que necesito es que al seleccionar un option
este le pase su id
que es la posición de la bandera.
y actualise el style
de <span class="c-input-phone-country__flag"><span class="c-input-phone-country__flag__img" data-phone-flag="" style="background-position: 0px -250px;">
Cada id
viene a ser la posiciona de la bandera por defecto esta en -250 que es Argentina <option value="+ 54" id="250">Argentina</option>
y también estoy pensando en que si escribe en el input
el código del pais este lo busque el option
y posicione su bandera