0

Amigos que tal, como podría pasar el id de un option a un javascriptpara 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

0

1 respuesta 1

1

Hola lo que yo haría sería colocar un data-id con la posición deseada en cada option value

<option value="+ 971" id="25" data-position="-1px">Emiratos Árabes Unidos</option>

Y ya en mi archivo js

$(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...)
    var position = $(this).find(':selected').data('position');
    $('.c-input-phone-country__flag__img').css({
        'background-position': `0px ${position}`
    });
  });
});

se modifica para obtener el valor y asignarlo al span dinamicamente.

creo que se entiende bien, igual te dejo el fiddle

https://jsfiddle.net/mh1vw68b/2/

(no están ordenadas las banderas de acuerdo a su país.)

2
  • tu respuesta esta genial, y ahora como podría posicionar la bandera mientras escribo el código del pais, digamos que escribo el +54 por ende quiero que salga la bandera de Argentina en el input. Commented el 12 ene. 2019 a las 14:50
  • @CésarRodríguezReyes Añadiendo un listener al evento input, el cual se ejecutará en cada dígito añadido o quitado. La idea es capturar los primeros dígitos para ver de qué bandera se trata y mostrarla en el input. Inténtalo y publica una nueva pregunta en caso tengas algún problema.
    – gugadev
    Commented el 13 ene. 2019 a las 6:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.