0

選択メニューがあり、さらに選択入力を動的に追加したいと考えています。私はこの解決策を見つけました: 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 2番目の選択メニューの「Мобильный」というラベルは、複製した「span」に書かれているので変わりません。

この問題を解決する方法はありますか? ありがとうございました！

4

1 に答える 1

0

私はそれを行う方法を見つけました！（恐ろしい方法かもしれませんが、うまくいきます）。誰かがよりエレガントな方法を提案できれば、私は幸せで感謝します. しかし、念のため、解決策を投稿します。

今回は「clone()」を使用せず、jQuery Mobile が通常追加するすべての要素を手動で作成します。そして、別のオプションを選択すると、スパン内の「オプション名」を動的に変更する関数を使用します。この関数は、長い「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');
};

これは次回誰かを助けるかもしれません。

于 2013-04-20T12:28:09.367 に答える