使用 Jquery 将附加文本添加到现有占位符中

Question

我有一个带有现有占位符的输入字段

<input type="text" name="property_price" id="property_price" placeholder="Monthly Rent" />

现在我有一个 ajax 函数，它根据表单上方的国家/地区选择框返回货币（卢比或美元）。我想将此 ajax 货币返回添加到现有占位符中，以便最终结果在占位符中看起来像这样

月租 (Rs.) 或 月租（美元）

这应该在占位符内。 “每月租金”的值也来自一个 jquery 函数，该函数显示“每月租金”或“售价”，具体取决于项目是出租还是出售。

ajax 函数货币返回结果如下

alert(msg);

初始占位符的值来自这个 Jquery 函数。

$('#property_availablefor').on('change', function() {

        if ( this.value == 'Rent')
        {
        $("#property_price").attr('placeholder', "Monthly Rent");

        }
        else if ( this.value == 'Sale')
        {
        $("#property_price").attr('placeholder', "Total Price");



        }

Answer 1

像这样修改html：

<input type="text" name="property_price" id="property_price" currency="USD" />

全局设置

 var arr = {'Rent':"Monthly Rent",'Sale':"Total Price"};

在 ajax 成功的数据属性中设置货币类型，如果您在rent/sale 元素之后更改国家/地区，则更新占位符

$('#property_price').attr('currency',currency);
if(  $('#property_availablefor').val().length > 0 ) {//check if the rent/sale element was  selected
     $("#property_price").attr('placeholder', $('#property_availablefor').val()+' '+ currency);
}

您更改的事件将如下所示：

$('#property_availablefor').on('change', function() {
     var currency = $('#property_price').attr('currency');
        $("#property_price").attr('placeholder', arr[this.value]+' '+ currency);
});

Answer 2

you can do the following:
$(document).on('change', '<country select box>', function() {
//your ajax call that returns the currency
//get the currency value in a variable say 'currencyVal'
//now assign the placeholder to the textbox.
var intitialPlaceholderTxt = $("#property_price").attr('placeholder').substring(0, $("#property_price").attr('placeholder').indexOf('(') != -1 ? $("#property_price").attr('placeholder').indexOf('(') : $("#property_price").attr('placeholder').length);
$("#property_price").attr('placeholder', intitialPlaceholderTxt + ' (' + currencyVal + ')');
});