2015-05-13 4 views
3

У меня есть PHP-код ниже, я хочу написать скрипт для чтения значения параметра из раскрывающегося списка и поместить каждое значение в поле ввода при изменении выбора. Пожалуйста помоги.Как использовать Jquery для чтения из выбранного параметра с массивом?

<html> 
    <head> 
    <!-- Load jQuery from Google's CDN --> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script> 
    //I want to write a script that will read the selected value and put in the input box 
    </script> 
    </head> 
    <body> 
    <?php 
    for ($i=0;$i<7;$i++) 
    { 
    ?> 
    <select id='select$i'> 
     <option value="1">Option1</option> 
     <option value="2">Option2</option> 
     <option value="3">Option3</option> 
    </select> 
     <input type="text" name="name" id="inputoption$i" />  
    <?php }?> 
    <br /> 


    </body> 
</html> 
+0

отметить свой 'ID = 'выберите $ i'' и' ID = "inputoption $ я" 'как это будет рассматриваться буквальным' $ i', а не PHP вар, как это не внутри php tag ' Sean

+1

Возможный дубликат [Получить выбранное значение выпадающего элемента с помощью jQuery] (http://stackoverflow.com/questions/2780566/get-selected-value-of-a-dropdowns-item- using-jquery) –

ответ

3

Попробуйте это:

<html> 
<head> 
    <script type="text/javascript" src="jquery-2.1.1.min.js"></script> 
</head> 
<body> 
<div class="category-panel"> 
    <?php 
    for($i = 0; $i < 7; $i++) 
    { 
    ?> 
    <select id='select<?php echo $i; ?>'> 
     <option value="1">Option1</option> 
     <option value="2">Option2</option> 
     <option value="3">Option3</option> 
    </select> 
    <input type="text" name="name" id="inputoption<?php echo $i; ?>"/> 
    <?php } ?> 
    <br/> 
</div> 
<script> 
    $("select").on("change", function() 
    { 

    $(this).next("input").val($(this).val()); 
    }); 
</script> 
</body> 
</html> 
1

Сформировать их -

<?php 
for ($i=0;$i<7;$i++) 
{ 
?> 
<select class="selectoption"> 
    <option value="1">Option1</option> 
    <option value="2">Option2</option> 
    <option value="3">Option3</option> 
</select> 
    <input type="text" name="name" class="inputoption" />  
<?php }?> 

С JS -

$('.selectoption').on('change', function() { 
    $(this).next('.inputoption').val($(this).val()); 
}); 

DEMO

2

Лучше изменить идентификатор в классе:

$(function() { 
 
    $(document).on('change', '.selectMe', function() { 
 
    $(this).next().val($(this).val()); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class='selectMe'> 
 
    <option value="1">Option1</option> 
 
    <option value="2">Option2</option> 
 
    <option value="3">Option3</option> 
 
</select> 
 
<input type="text" name="name" class="inputoption" /> 
 
<select class='selectMe'> 
 
    <option value="1">Option1</option> 
 
    <option value="2">Option2</option> 
 
    <option value="3">Option3</option> 
 
</select> 
 
<input type="text" name="name" class="inputoption" />

0

Вы можете попробовать ниже сценарий:

DEMO

$('.selc').on('change',function() 
{ 
    $(this).siblings('input[type=text]').val($(this).val()); 
}); 
+1

ваш код будет помещать значение только в 1 текстовое поле, а не в текстовое поле sibling. – Sean

0

Я использовал решение Cryptovirus, я как ниже, и она работает очень хорошо.

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">  
    </script> 

    </head> 
    <body> 
    <?php 
    for ($i=0;$i<7;$i++) 
    { 
    echo("<script> 
    $('select[id^=select]').change(function(event){ 
    $(event.target).next().val($(event.target).val()); 
    }); 
    </script>"); 
    echo("<select id='select$i'> 
     <option value='1'>Option1</option> 
     <option value='2'>Option2</option> 
     <option value='3'>Option3</option> 
    </select> 
    <input type='text' name='name' id='inputoption$i' /> </br>"); 
    }?> 

    </body> 
    </html> 
Смежные вопросы