Как получить выбранное значение параметра из выпадающего списка в коде PHP

Question

У меня есть выпадающий список, в котором перечислены логотипы, такие как цветок, бабочка и т. Д.

<p class="title1">Logo</p>
<select name="logoMenu" class="select" size="7">
    <?php foreach($logos as $logo):?>
        <option id="<?php echo $logo['Subproperty']['id'];?>" value="<?php echo $logo['Subproperty']['values'];?>">
            <?php echo $logo['Subproperty']['values'];?>
        </option>
    <?php endforeach;?>
</select>

Предположим, я выбираю логотип 'Flower' из выпадающего списка, я хочу, чтобы изображение цветка отображалось в div. Это div, который я должен отобразить картинки:

<div id="theme_logos" class="float_left spaceleft" style="display:none;">
    <?php foreach($defaultLogos as $logo):
        //if($logo['Subproperty']['values']==clicked option value){?>
        <img height="50" width="50" src="/FormBuilder/app/webroot/img/themes/<?php echo $logo['Subproperty']['images'];?>" class="float_left user_profile_image user_profile_image" alt="Default50"/> 
    <?php endforeach;?>
</div>

Проблема с этим кодом состоит в том, что он отображает все изображения, найденные в таблице. Потому что в коде моего контроллера я даю только идентификатор свойства как у «Логотипа», но не указываю, какой логотип.

$this->set('defaultLogos',$this->Subproperty->find('all',array('conditions'=>array('Subproperty.property_id'=>1,'Subproperty.values'=>"Flower"))));

Здесь у меня есть жестко закодированный «цветок», так что я получаю только изображение цветка.

Если я выберу логотип из выпадающего списка, как я могу передать это выбранное значение в код контроллера? Или, если я получу название выбранного логотипа с помощью jQuery, как я могу использовать это значение в условии if внутри цикла foreach?

Я использую CakePHP framework.

$("#logoMenu option").click(function(){
    selectedLogo=$(this).attr("value");
    $('#subproperty_id').val($(this).attr("id"));   

    if(selectedLogo=="Your logo"){
        $("#themes_upload").show();
    }
    else{
        alert(selectedLogo);
        $("#themes_upload").hide();
        $("#theme_logos").show();
    }
});

EDIT:

Теперь я попробовал AJAX POST, где я передаю выбранный логотип тому же действию контроллера. Я получаю значение, когда оповещаю о переданном значении в функции успеха функции ajax, но картинка не появляется.

$("#logoMenu option").click(function(){
    selectedLogo=$(this).attr("value");
    $('#subproperty_id').val($(this).attr("id"));   

    if(selectedLogo=="Your logo"){
        $("#themes_upload").show();
    } else {
        alert(selectedLogo);
        $.ajax({
            type: "POST",
            url: "http://localhost/FormBuilder/index.php/themes/themes/",
            async: false,
            data: "selectedLogo="+selectedLogo,
            success: function(msg){
            alert( "Data Saved: " + msg);
    }
});

$("#themes_upload").hide();
$("#theme_logos").show();
}

function themes(){  
    $this->set('themes',$this->Theme->find('all'));
    $logo=$this->params['form']['selectedLogo']; 
    echo "logo:".$logo;  
    $this->set('defaultLogos',$this->Subproperty->find('all',array('conditions'=>array('Subproperty.property_id'=>1,'Subproperty.values'=>$logo))));
}

Когда я пытаюсь отобразить изображение на странице, оно не появляется. Это потому, что команда div show находится после запроса AJAX?

Answer 1

, если вы можете установить значение src для изображения в значении выбранного вами параметра или в качестве атрибута изображения в скрытом элементе div указать значение элемента, отображаемого в параметре выбора, это будет действительно легко. Как:

CASE 1) Помещение img src в свойство value опции

<option id="<?php echo $logo['Subproperty']['id'];?>" 
 value="/FormBuilder/app/webroot/img/themes/
                <?php echo $logo['Subproperty']['images'];?>">....</option>

$("#logoMenu").change(function(){
    var logo=$("#logoMenu option:selected").attr("value");
    $("#theme_logos img").hide();
    $("#theme_logos img[src='"+logo+"']").show();
})

Случай 2) Установка значения alt для изображения в опции

<img height="50" width="50" src="..<?php echo $logo['Subproperty']['images'];?>"
      class="..." alt="<?php echo $logo['Subproperty']['values'];?>"/>

<option id="<?php echo $logo['Subproperty']['id'];?>" 
 value="<?php echo $logo['Subproperty']['values'];?>">..</option>

$("#logoMenu").change(function(){
    var alt=$("#logoMenu option:selected").attr("value");
    $("#theme_logos img").hide();//hide any other logo that is showing
    $("#theme_logos img[alt='"+alt+"']").show();//show selected logo
})

РЕДАКТИРОВАТЬ: - Тестовый код (СЛУЧАЙ 2)

<div id="logos">
   <img src="flwrs_1.jpg" alt="1" height="32" width="32" style="display:none;" />
   <img src="flwrs_2.jpg" alt="2" height="32" width="32" style="display:none;" />
   <img src="flwrs_3.jpg" alt="3" height="32" width="32" style="display:none;" />
   <img src="flwrs_4.jpg" alt="4" height="32" width="32" style="display:none;" />
   <img src="flwrs_5.jpg" alt="5" height="32" width="32" style="display:none;" />
</div>
<select id="logo">
   <option id='1' value='1'>1</option>
   <option id='2' value='2'>2</option>
   <option id='3' value='3'>3</option>
   <option id='4' value='4'>4</option>
   <option id='5' value='5'>5</option>
</select>

<script type="text/javascript">
$(document).ready(function(){
     $("#logo").change(function(){
         var i=$("#logo option:selected").attr("value");
         $("div#logos img").hide();
         $("#logos img[alt='"+i+"']").show();
     });
});
</script>