2013-11-21 2 views
1

Мне было интересно, есть ли способ, подобный приведенному ниже коду, чтобы использовать поля «условные». Я попробовал несколько методов jquery, но я действительно застрял, так как я использую wordpress, и это должно быть окно поиска, поэтому это усложняет для меня вещи.

<form name="main" method="post"> 
    <select name="currency-select"> 
    <option value="default">Currency</option> 
    <option value="a">U.S Dollars (USD)</option> 
    <option value="b">Euros (EUR)</option> 
    <option value="c">British Pounds (GBP)</option> 
    </select> 
</form> 

<form name="child"> 
    <select name="currency-child"> 

    <?php if($_POST['currency-select'] == "a"): > 
     <option value="1">price</option> 
     <option value="2">100</option> 
     <option value="3">200</option> 
     <option value="4">300</option> 
    <?php endif; ?> 

    <?php if($_POST['currency-select'] == "b"): > 
     <option value="5">price</option> 
     <option value="6">50</option> 
     <option value="7">60</option> 
     <option value="8">70</option> 
    <?php endif; ?> 

    <?php if($_POST['currency-select'] == "c"): > 
     <option value="9">price</option> 
     <option value="10">130</option> 
     <option value="11">260</option> 
     <option value="12">390</option> 
    <?php endif; ?> 

    </select> 
</form> 

Update: синтаксические ошибки фиксированной

+0

ли те два на та же страница? Если это так, то '$ _POST' не имеет смысла, потому что вам нужно будет отправить форму сначала, чтобы отобразить вторую часть. Конечно, вы можете сделать это с помощью JavaScript (или jQuery при необходимости). Просто покажите правильные элементы '

+0

Вы уверены, что синтаксических ошибок нет? – Peon

+0

Если это так сложно, как я понял, я просто добавлю три окна 'select' и покажу только тот, который применяется на основе выбора поля« выбор валюты ». Если это усложняется, вам придется использовать ajax. – jeroen

ответ

0

Пока форма не занесена, PHP не делать ничего о вашей форме, и вы не имеете кнопку отправки в вашем HTML так значения не будут установлены в вашем скрипте PHP.
Предлагаю вам jQuery.
Я написал код ниже для вас, но вы должны установить новые атрибуты для ваших HTML элементов, и добавить <div> с id="wrapper" -><div id="wrapper">
Если вы не добавить wrapper, изменить $('#wrapper').on('change', 'form#main', function() { с $(document).on('change', 'form#main', function() {.
, но в крупных кодах я предлагаю #wrapper вместо document.

КОД:
Добавить эти строки в <head> страницы:

//jQuery 
<script type="text/javascript" src="../jQuery/jquery-1.10.2.min.js"></script> 

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 

     $('#wrapper').on('change', 'form#main', function() { 
      if ($('#a').is(':selected')) { 
       $('option.remove').remove(); 
       $('#child1').append('<option value="1" class="remove">price</option>'); 
       $('#child1').append('<option value="2" class="remove">100</option>'); 
       $('#child1').append('<option value="3" class="remove">200</option>'); 
       $('#child1').append('<option value="4" class="remove">300</option>'); 

      } 
      else if ($('#b').is(':selected')) { 
       $('option.remove').remove(); 
       $('#child1').append('<option value="1" class="remove">price</option>'); 
       $('#child1').append('<option value="6" class="remove">50</option>'); 
       $('#child1').append('<option value="7" class="remove">60</option>'); 
       $('#child1').append('<option value="8" class="remove">70</option>'); 
      } 
      else if ($('#c').is(':selected')) { 
       $('option.remove').remove(); 
       $('#child1').append('<option value="9" class="remove">price</option>'); 
       $('#child1').append('<option value="10" class="remove">130</option>'); 
       $('#child1').append('<option value="11" class="remove">260</option>'); 
       $('#child1').append('<option value="12" class="remove">390</option>'); 

      } 
      else if ($('#default').is(':selected')) { 
       $('option.remove').remove();//reset every thing 
      } 

    }); 

    }); 
</script> 


Body-HTML элементы-

<body> 
<div id="wrapper"> 
<form name="main" method="post" action="#" id="main"> 
    <select name="currency-select"> 
    <option value="default" id="default">Currency</option> 
    <option value="a" id="a">U.S Dollars (USD)</option> 
    <option value="b" id="b">Euros (EUR)</option> 
    <option value="c" id="c">British Pounds (GBP)</option> 
    </select> 
</form> 

<form name="child" id="child" method="post" action="#"> 
    <select name="currency-child" id="child1"> 
    </select> 
</form> 
</div> 
</body> 
+0

@ tlt2w, когда вы скрываете и показываете элементы, управление этими элементами будет сложным, но когда вы добавляете новый элемент на страницу, другие языки на стороне сервера имеют определенное поведение и проецируются с этими элементами тоже ...
I надеюсь, что вы сочтете это полезным ... – Kiyarash

+0

Спасибо @Kiyarash! Я рассмотрю его и изменю код, который у меня есть сейчас, чтобы соответствовать вашим предложениям. – tlt2w

+0

@ tlt2w Добро пожаловать ... Я проверил код и отлично работал. Просто будьте осторожны, чтобы добавить файл jQuery на свою страницу с правильным адресом ... – Kiyarash

Смежные вопросы