переменная jquery не изменяется при обновлении

Question

Эта справка для моей проблемы. Я хочу добавить текст после поля ввода (при обновлении того же поля), только когда значение элемента select является IT.

Это поля:

<select id="billing_country"> 
    <option value="FR">FR</option> 
    <option value="IT">IT</option> 
</select> 

<input type="text" id="woocommerce_cf_piva"> 

это сценарий:

jQuery(document).ready(function() { 

var $country_select = jQuery('#billing_country'); 

// When country change 
$country_select.change(function() { 

    var $country = jQuery('#billing_country option:selected'); 

    $country.each(function() { 

     FieldCheck(jQuery(this).val()); 
    }) 
}); 

function FieldCheck($country) { 

    var $element = jQuery('#woocommerce_cf_piva'); 

    if ($country == 'IT') { 

     $element.change(function() { 

      $element.after($country); 
     }); 
    } 
} 
}); 

Вы можете see this also on jsFiddle

Почему это добавить название страны, также, если я выбрать FR?

Answer 1

Я хотел бы добавить пролет и поместить текст там так последующих изменений вы можете это исправить:

<select id="billing_country"> 
    <option value="FR">FR</option> 
    <option value="IT">IT</option> 
</select> 
<input type="text" id="woocommerce_cf_piva" /><span id="afterit"></span> 

Обратите внимание, что это по-прежнему довольно многословно:

jQuery(document).ready(function() { 
    var $country_select = jQuery('#billing_country'); 
    var $element = jQuery('#woocommerce_cf_piva'); 

    // When country change 
    $country_select.on('change', function() { 
    var $country = jQuery(this).find('option:selected')[0].value; 
    var d = ($country == 'IT') ? $country : ""; 
    $element.data('selectedcountry', d); 
    }); 

    $element.on('change', function() { 
    var ct = $(this).data('selectedcountry'); 
    //as you have it: $(this).after(ct);// append 
    // put it in the span to remove/blank out on subsequent changes 
    $('#afterit').text(ct); 
    }); 
}); 

Вот общий less-verbose version:

$('#woocommerce_cf_piva').on('change', function() { 
    var v = $('#billing_country').find('option:selected')[0].value; 
    $('#afterit').text((v == 'IT') ? v : ""); 
}); 

Answer 2

Трудно понять, что вы пытаетесь сделать с кодом.

Вы хотите, чтобы текстовый ввод изменил свое значение, только если в поле выбора выбрано «IT»?

Почему вы устанавливаете обработчик change на ввод текста?

Зачем перебирать опции выбора, если это один выбор? Просто установите ввод текста со значением выбранного опциона, например,

$(function() { 
    var $billingCountry = $('#billing_country'); 

    $billingCountry.change(function() { 
    var $country = $('#billing_country option:selected'); 
    fieldCheck($country.val()); 
    }); 

    function fieldCheck(country) { 
    var $element = $('#woocommerce_cf_piva'); 
    if ($country !== 'IT') { 
     return; 
    } 

    $element.val(country); 
    } 
}); 

https://jsfiddle.net/davelnewton/w5deffvk/

Редактирует

• соглашения об именах изменена, чтобы отразить типичный JS
  • функцию Non-конструктор имена начинаются с нижнего регистра
  • Non-JQ элемент вары не получают ведущее значение $
• Страны, используемое в качестве пункта охраны, а не гнездится логике
  • Этот код является тривиальным, но гнездование может сделать все труднее рассуждать о

Answer 3

у вас есть две проблемы:

1. input тег не имеет onchange event; вместо этого вы должны использовать onkeydown;
2. Вы должны назначить события до if условий.

Answer 4

Если я правильно понял проблему, вы хотите обновить поле ввода с введенным значением, только если выпадающий выбор «IT». Если это так, вам нужно посмотреть событие поля ввода и вызвать функцию FieldCheck с помощью в событиях поля ввода.