Question

我有一个选择菜单，我想动态添加更多选择输入。我找到了这个解决方案：https://gist.github.com/snipe/1925906，如果没有jQuery Mobile，它的效果很好。但是jQuery Mobile会修改元素并添加自己的代码。所以在选择菜单本身之前，jQM会添加这些元素（还有一些但不是那么重要）：

<span class='ui-btn-inner'><span class='ui-btn-text'><span>Option Name</span></span><span class='ui-icon ui-icon-arrow-d ui-icon-shadow'>&nbsp;</span></span>

此“选项名称”已在此处，当我调用使用“clone（）”命令的函数时，它也会克隆此“选项名称”。因此，第一个选择菜单工作正常，其选项名称也会更改，但在克隆菜单中，即使我选择其他选项，它也会保持不变。

更新：这是我的代码（在一些地方抱歉俄语）。带有选择和文本输入的HTML：

<fieldset class='ui-grid-a'>
<div id='inputphone1' class='clonedInputPhone'>
    <div class='ui-block-a' style='max-width: 200px;'>
    <select name='phone_type[]' data-mini='true'>
        <option value="mobile">Мобильный</option>
        <option value="home">Домашний</option>
        <option value="work">Рабочий</option>
    </select> 
    </div>
</div> <!-- inputphone1 -->
<div id='textinputphone1' class='textclonedInputPhone'>
    <div class='ui-block-b'>
    <input type='text' name='phone_number[]' data-mini='true' />
    </div>
</div> <!-- textinputphone1 -->
</fieldset> 

<fieldset class="ui-grid-a">
    <div class="ui-block-a" style="max-width: 200px;">
    </div>
    <div class="ui-block-b">
       <input id="btnAddPhone" type="button" data-icon="plus" data-iconpos="notext" data-inline="true" data-mini="true" onClick="addInput('phone_type', 'phone_number', 'clonedInputPhone', 'inputphone', 'btnAddPhone', 'btnDelPhone', '7', '0');" />
       <input id="btnDelPhone" type="button" data-icon="minus" data-iconpos="notext" data-inline="true" data-mini="true" disabled="disabled" onClick="removeInput('clonedInputPhone', 'inputphone', 'btnAddPhone', 'btnDelPhone');" />
    </div>
</fieldset>

和js函数：

function addInput(selectName, textName, clonedInputName, inputName, btnAddName, btnDelName, limit, numstart){

// how many "duplicatable" input fields we currently have
var num = $('.' + clonedInputName).length;  

$('#' + btnDelName).removeAttr('disabled').button('enable');

// the numeric ID of the new input field being added
var newNum  = new Number(num + 1);

var newSelect = $('#' + inputName + num ).clone().attr('id', inputName + newNum);                                 
$('#text' + inputName + num).after(newSelect);  

var newText = document.createElement('div');
newText.id = 'text' + inputName + newNum;
newText.className = 'text' + clonedInputName;   
newText.innerHTML = "<div class='ui-block-b'><div class='ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c ui-mini'><input type='text' name='" + textName + "[]' data-mini='true' class='ui-input-text ui-body-c'></div></div>";
$(newSelect).after(newText);

if (newNum == limit - numstart)  {
    $('#' + btnAddName ).prop('disabled', 'disabled').button('disable');
} 
};

function removeInput(clonedInputName, inputName, btnAddName, btnDelName){

// how many "duplicatable" input fields we currently have           
var num = $('.' + clonedInputName).length;  

// remove the last element  
$('#' + inputName + num ).remove();  
$('#text' + inputName + num ).remove();     

// enable the "add" button, since we've removed one             
$('#' + btnAddName).removeAttr('disabled').button('enable');    

// if only one element remains, disable the "remove" button     
if ( num - 1 == 1)
$('#' + btnDelName ).prop('disabled', 'disabled').button('disable');
};

因为我无法上传截图，所以它是：http://d.pr/i/choo 第二个选择菜单中的标签“Мобильный”不会改变，因为它是用克隆的“span”写的。

任何想法如何解决这个问题？谢谢！

Answer 1

我找到了办法！（可能是一种可怕的方式，但它确实有效）。如果有人能提出更优雅的方式，我会感到高兴和感激。但我会发布我的解决方案，以防万一。

这次我没有使用“clone（）”，我手动创建了jQuery Mobile通常添加的所有元素。然后我使用在我选择其他选项时动态更改范围中“选项名称”的功能。这个函数可以在looooong“newdiv.innerHTML”部分的末尾找到。

这是我的新HTML / PHP代码（我还优化了一些我传递给函数的参数）：

<div id='input_phone1' class='cloned_input_phone'>
<fieldset class='ui-grid-a'> 
    <div class='ui-block-a' style='max-width: 200px;'>
        <select name='phone_type[]' data-mini='true'>
        <?php
        $selectOptionsPhone = "<option value=\'mobile\'>Мобильный</option><option value=\'home\'>Домашний</option><option value=\'work\'>Рабочий</option>";  
        echo $selectOptionsPhone;
        ?>
        </select> 
    </div>
    <div class='ui-block-b'>
        <input type='text' name='phone_value[]' data-mini='true' />
    </div>
</fieldset> 
</div> <!-- input_phone1 -->

<fieldset class="ui-grid-a">
    <div class="ui-block-a" style="max-width: 200px;">
    </div>
    <div class="ui-block-b">
        <?php
        echo "<input id='btn_add_phone' type='button' data-icon='plus' data-iconpos='notext' data-inline='true' data-mini='true' onClick=\"addInput('phone', 'Мобильный', '".$selectOptionsPhone."', '".$phone_max."', '0');\" />";
        ?>
        <input id="btn_del_phone" type="button" data-icon="minus" data-iconpos="notext" data-inline="true" data-mini="true" disabled="disabled" onClick="removeInput('phone');" />
    </div>
</fieldset>

我的JS功能：

function addInput(valueName, selectDefault, selectOptions, limit, startNum){

var inputName = "input_" + valueName;
var clonedInputName = "cloned_input_" + valueName;
var selectName = valueName + "_type[]";
var textName = valueName + "_value[]";
var btnAddName = "btn_add_" + valueName;
var btnDelName = "btn_del_" + valueName;

// how many "duplicatable" input fields we currently have
var num = $('.' + clonedInputName).length;  

$('#' + btnDelName).removeAttr('disabled').button('enable');

// the numeric ID of the new input field being added
var newNum  = new Number(num + 1);

var newdiv = document.createElement('div');
newdiv.id = inputName + newNum;
newdiv.className = clonedInputName; 
newdiv.innerHTML = "<fieldset class='ui-grid-a'><div class='ui-block-a' style='max-width: 200px;'><div class='ui-select'><div data-corners='true' data-shadow='true' data-iconshadow='true' data-wrapperels='span' data-icon='arrow-d' data-iconpos='right' data-theme='c' data-mini='true' class='ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-right ui-btn-up-c'><span class='ui-btn-inner'><span class='ui-btn-text'><span class='update" + valueName + num + "'>" + selectDefault + "</span></span><span class='ui-icon ui-icon-arrow-d ui-icon-shadow'>&nbsp;</span></span><select name='" + selectName + "' id='choose" + valueName + num + "' data-mini='true' data-role='none'>" + selectOptions + "</select></div></div></div><div class='ui-block-b'><div class='ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c ui-mini'><input type='text' name='" + textName + "' data-mini='true' class='ui-input-text ui-body-c'></div></div></fieldset><script type='text/javascript'>$('#choose" + valueName + num + "').change(function(event) {$('span.update" + valueName + num + "').html($(\"#choose" + valueName + num + " option:selected\").text());}); </script>";                                

$('#' + inputName + num).after(newdiv);     

if (newNum == limit - startNum)  {
    $('#' + btnAddName ).prop('disabled', 'disabled').button('disable');
    } 
};

function removeInput(valueName){

var inputName = "input_" + valueName;
var clonedInputName = "cloned_input_" + valueName;
var btnAddName = "btn_add_" + valueName;
var btnDelName = "btn_del_" + valueName;

// how many "duplicatable" input fields we currently have           
var num = $('.' + clonedInputName).length;  

// remove the last element  
$('#' + inputName + num ).remove();  
$('#text' + inputName + num ).remove();     

// enable the "add" button, since we've removed one             
$('#' + btnAddName).removeAttr('disabled').button('enable');    

// if only one element remains, disable the "remove" button

if ( num == 2)
$('#' + btnDelName ).prop('disabled', 'disabled').button('disable');
};

这可能会帮助下次有人。

动态添加jQuery Mobile选择菜单

1 个答案: