Question

I have a MVC View with a few images, each image has a link that links to a Form that is located on the bottom of the View, the Form has a <select> filed that has to be populated based on the clicked link.

This is the div on the top of the page with the images and the links:

<div class="propImg"><img src="images/1.jpg" alt="" /></div>
    <a href="#lnkForm" class="serviceRequest">Customer Service Request</a>
</div>
<div class="propImg"><img src="images/2.jpg" alt="" /></div>
    <a href="#lnkForm" class="serviceRequest">Customer Service Request</a>
</div>

And this is the form in the bottom of the page:

<form id="formProperties">
   <select id="properties" name="properties" class="required simple-dropdown txtbox">
     <option value="">Select a Property</option>
     <option value="1">100 Central Avenue</option>
     <option value="2">220 Central Avenue</option>
   </select>
</form>

This is the JavaScript function that on <a> click toggles the page and takes the user to the form:

$('a[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

I'm not sure how to populate the <select> based on the link that the user clicks. For example: If the user clicked on the first link the <select> should now has the 1 value, if the second <a>- the <select> should be set with 2 etc...

Any advice?

The divs of the images and the links look like that: (I removed some design elements to shorten it but I see it is necessary...)

<div>
        <div class="propImg"><img src="images/1-test-RoadL.jpg" alt="" /></div>
        <span class="txt15">
            <br>
            <strong>1 test Road</strong><br>
            Piscataway, NJ
        </span>
        <span class="state">
            <br>
            12,477 SF<br>
        </span><br>
        <a href="#lnkForm" class="serviceRequest">Customer Service Request</a>
</div>

Answer 1

试试这个。

$('.serviceRequest').on('click',function (e) {
    var q = $(this);
    var target = q.index('.serviceRequest')+1;
    $("#properties option[value="+target+"]").prop("selected","selected");
    e.preventDefault();
});

此处的示例：https://jsfiddle.net/synz/3s5jgr1o/1/

Answer 2

如果你正在使用jquery，你可以为它创建自己的插件

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="test-select">
  <option value="" selected>Select</option>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
</select>
<br />
<a href="javascript:void(0)" data-selectify="1" data-target="#test-select">Click to select 1</a>
<br />
<a href="javascript:void(0)" data-selectify="2" data-target="#test-select">Click to select 2</a>

＆＃13;

{{1}}

＆＃13;

Answer 3

根据已点击的链接，可以获取img文件名，并且可以使用下面的代码行选择img name选项。

var filename = $(this).prev().find('img').attr('src').split('/').pop().split('.')[0];

请查看以下工作片段。

＆＃13;

$('a[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
  
    //Get filename from img tag based on the link clicked
    var filename = $(this).prev().find('img').attr('src').split('/').pop().split('.')[0];
    //Get selected option based on the link has been clicked.
    $("#properties").val(filename)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="propImg"><img src="images/1.jpg" alt="" /></div>
    <a href="#lnkForm" class="serviceRequest">Customer Service Request</a>
</div>
<div class="propImg"><img src="images/2.jpg" alt="" /></div>
    <a href="#lnkForm" class="serviceRequest">Customer Service Request</a>
</div>

<form id="formProperties">
   <select id="properties" name="properties" class="required simple-dropdown txtbox">
     <option value="">Select a Property</option>
     <option value="1">100 Central Avenue</option>
     <option value="2">220 Central Avenue</option>
   </select>
</form>

＆＃13;

如何根据<a> click

3 个答案: